[开发工具]vscode 开发工具指南之你所不知道的强悍功能

介绍Visual studio code的用法，结合实际开发需要，突出介绍一些强悍技能。无论是MacBook 还是Windows用户，它都能够实现快速文本编辑和markdown编写，让文本编辑进入高效模式。

1. 公共篇

1.1 云备份配置，一个json文件搞定

{
    "workbench.colorTheme": "Quiet Light",
    "workbench.startupEditor": "newUntitledFile",
    "workbench.iconTheme": "vscode-icons",
    "workbench.editor.enablePreview": false, //不使用预览打开

    // 避免每次窗口都被覆盖
    "window.openFoldersInNewWindow": "on",
    "window.restoreWindows": "none",
    "files.autoSave": "afterDelay",
    "files.autoSaveDelay": 60000,

    // "security.workspace.trust.untrustedFiles": "open",
    "security.workspace.trust.enabled": false,
  
  	//前端相关
    "[vue]": { //vuejs 格式化问题
        "editor.defaultFormatter": "octref.vetur"
    },
    "vetur.format.defaultFormatter.html": "js-beautify-html",
    "vetur.format.defaultFormatter.js": "prettier",
    "vetur.format.defaultFormatterOptions": {
        "js-beautify-html": {
            "wrap-attributes": "aligned-multiple",
            "wrap-attributes-indent-size": 4,
            "wrap-line-length": 150,
            "indent_size": 2, //两个空格位置
        },
        "prettier": {
            "tabWidth": 2, //两个空格位置
            "printWidth": 200,
            "singleQuote": false,
            "jsxBracketSameLine": true,
        },
    },
 
    "[javascript]": {    //JavaScript 格式化问题
        "editor.defaultFormatter": "HookyQR.beautify"
    },
    "[json]": {
        "editor.defaultFormatter": "HookyQR.beautify"
    },

    "editor.tabSize": 4,
    "editor.fontSize": 13,
    "editor.wordWrap":"wordWrapColumn",
    "editor.wordWrapColumn": 160,
    "editor.suggestSelection": "first",
    "editor.quickSuggestions": {
        "strings": true
    },

    //java 相关
    "java.home": "D:\\Program Files\\java\\jdk1.8.0_191",
    "java.semanticHighlighting.enabled": true,
    "java.configuration.maven.userSettings": "D:\\ProgramData\\apache-maven-3.5.4\\conf\\settings-admin.xml",
    "maven.executable.path": "D:\\ProgramData\\apache-maven-3.5.4\\bin\\mvn.cmd",
    "maven.excludedFolders": [
        "**/.*",
        "**/node_modules",
        "**/target",
        "**/bin"
    ],
    "files.exclude": {
        "**/.classpath": true,
        "**/.project": true,
        "**/.settings": true,
        "**/.factorypath": true
    },

    /*   未知配置**/
    "vsintellicode.modify.editor.suggestSelection": "automaticallyOverrodeDefaultValue",
    "prettier.tabWidth": 4,
    "prettier.eslintIntegration": true,
    "eslint.migration.2_x": "off",
	  "eslint.autoFixOnSave": true,
    "eslint.validate": [
        "javascript",
        "javascriptreact",
        "html",
        {"language": "vue", "autoFix": true}
    ],
    "eslint.options": {
        //"configFile": "E:/git/github/styleguide/eslint/.eslintrc.js",
        "plugins": ["html"]
    },
}

1.2 列编辑

Windows: alt+shift
mac: option + shift

1.3 类似notepad++,递增插入

1.3.1 安装插件 Insert Numbers

Windows: control + alt + n
mac: command + option + n

1.3.2 横向多列插入

windows： 按下 alt 选择 多列
mac：按下option 选择  多列

1.4 csv 和 markdown 查看工具

1.4.1 你还在为，wps 或者 office中，自动转换 文本为数字烦恼吗？

1.4.2 你还在拼命寻找一款免费的markdown编辑器？

1.5 命令区

1.5.1 大小写转换

1.5.2 排序

1.5.3 合并行

2. 前端篇

2.1 安装vetur插件

2.2 你还在烦恼没有找到 npm 脚本吗，看这里

2.3 前端开发配置参考

  	//前端相关
    "[vue]": { //vuejs 格式化问题
        "editor.defaultFormatter": "octref.vetur"
    },
    "vetur.format.defaultFormatter.html": "js-beautify-html",
    "vetur.format.defaultFormatter.js": "prettier",
    "vetur.format.defaultFormatterOptions": {
        "js-beautify-html": {
            "wrap-attributes": "aligned-multiple",
            "wrap-attributes-indent-size": 4,
            "wrap-line-length": 150,
            "indent_size": 2, //两个空格位置
        },
        "prettier": {
            "tabWidth": 2, //两个空格位置
            "printWidth": 200,
            "singleQuote": false,
            "jsxBracketSameLine": true,
        },
    },
 
    "[javascript]": {    //JavaScript 格式化问题
        "editor.defaultFormatter": "HookyQR.beautify"
    },
    "[json]": {
        "editor.defaultFormatter": "HookyQR.beautify"
    },

    "editor.tabSize": 4,
    "editor.fontSize": 13,
    "editor.wordWrap":"wordWrapColumn",
    "editor.wordWrapColumn": 160,
    "editor.suggestSelection": "first",
    "editor.quickSuggestions": {
        "strings": true
    },

3. 后端篇

3.1 远程开发（你还在为vim，操作不便烦恼吗？）

3.1.1 安装 Remote Development 插件包

3.1.2 按照步骤连接终端

3.1.3. 编辑文件

若有收获，就点个赞吧～