使用setting sync一键配置VS Code

使用setting sync一键配置VS Code

注意：操作会覆盖VS Code原有配置

使用步骤

1. 在VS Code中安装setting sync扩展
2. 使用快捷键Alt+Shift+D下载配置
   按过快捷键之后，会自动打开浏览器跳到生成token值的页面。https://github.com/settings/tokens
3. 获得token
   该token值跟github账号关联。

   • 第一次使用（github账号登录的情况下）
     步骤一：

     

     步骤二：

     

     步骤三：
     

   • 保存该token，以后可以直接使用

4. 在VS Code弹框中输入token值（弹框一般在VS Code界面上方中间位置），点击enter键。
5. 继续在新的弹框中输入gist id值：f756d3772c3fd740dc31d6a20abbb328（这是一个公用Gist Id）
   该gist值保存着一些默认配置和常用扩展
6. 等待自动下载 扩展和相关配置 完成

上述gist id包含内容：

1. 扩展
   • auto-rename-tag v0.0.15
   • beautify v1.4.11
   • bracket-pair-colorizer v1.0.61
   • code-settings-sync v3.2.8
   • color-highlight v2.3.0
   • debugger-for-chrome v4.11.3
   • docthis v0.7.1
   • open-in-browser v2.0.0
   • path-intellisense v1.4.2
   • sublime-keybindings v4.0.0
   • vetur v0.18.1
   • vscode-css-peek v2.2.0
   • vscode-eslint v1.8.2
   • vscode-gutter-preview v0.19.0
   • vscode-html-css v0.2.0
   • vscode-icons v8.5.0
   • vscode-language-pack-zh-hans v1.33.2
     （有关扩展的介绍请看上一篇）
2. 自定义快捷键

   [
       {
           "key": "ctrl+f1",
           "command": "extension.openInDefaultBrowser"
       },
       {
           "key": "f8",
           "command": "workbench.action.debug.continue",
           "when": "inDebugMode"
       }
   ]
   

3. 设置

   {
       "editor.fontSize": 16,
       "editor.formatOnPaste": false,
       "editor.tabSize": 4, // 编译器默认一个制表符等于4空格
       "editor.wordWrap": "on", // 折行显示
       "editor.snippetSuggestions": "top", // 代码片段建议显示到焦点
       "editor.renderWhitespace": "all",
   
       "workbench.colorTheme": "Monokai", // 主题
       "workbench.iconTheme": "vscode-icons", // 图标
   
       "extensions.showRecommendationsOnlyOnDemand": true, // 扩展列表关闭推荐
   
       "search.followSymlinks": false, // 解决rg.exe占用cpu问题
   
       "terminal.integrated.shell.windows": "C:\\Windows\\System32\\cmd.exe", // 终端在 Windows 上使用的 Shell 的路径
   
       "files.insertFinalNewline": true,
       "files.eol": "\n",
   
       // vetur插件相关配置
       "vetur.format.options.tabSize": 4,
       "vetur.format.defaultFormatter.html": "prettyhtml",
       "vetur.format.defaultFormatter.less": "none",
       "vetur.format.defaultFormatter.js": "vscode-typescript",
   
       "typescript.format.insertSpaceBeforeFunctionParenthesis": true, // 函数参数括号前加空格
       "javascript.format.insertSpaceAfterFunctionKeywordForAnonymousFunctions": false, // 匿名函数关键字后不加空格
       "javascript.preferences.quoteStyle": "single", // js使用单引号
   
       // beautify插件相关配置
       "beautify.config": {
           "tab_size": 4, // 一个tab等于4空格
           "end_with_newline": true // 文件末尾添加新行
       },
   
       "emmet.triggerExpansionOnTab": true, // 使用tab键触发emmet
       "emmet.includeLanguages": {
           "vue-html": "html",
           "vue": "html"
       },
   
       // eslint相关配置
       "eslint.autoFixOnSave": true, // 保存时自动修复可以修复的样式
       "eslint.options": {
           "baseConfig": { // eslint默认配置地址 (需要npm安装eslintrc-dj，根据自己地址修改下方地址)
               "extends": [
                   "C:/Users/xxxx/AppData/Roaming/npm/node_modules/eslintrc-dj/index.js"
               ]
           }
       },
       "eslint.validate": [ // eslint 在以下文件类型中生效
           "javascript",
           "javascriptreact",
           {
               "language": "html",
               "autoFix": true
           }
       ],
   
       // 格式化以下文件时按beautify规则进行
       "[javascript]": {
           "editor.defaultFormatter": "HookyQR.beautify"
       },
       "[html]": {
           "editor.defaultFormatter": "HookyQR.beautify"
       },
       "[css]": {
           "editor.defaultFormatter": "HookyQR.beautify"
       },
       "[json]": {
           "editor.defaultFormatter": "HookyQR.beautify"
       },
       "sync.gist": "5c348ef281bd99087989dc5739663a2a"
   }
   

4. 自定义代码片段

   {
       "commet with your name and data js/ts": {
           "scope": "javascript,typescript",
           "prefix": "any prefix you want",
           "body": [
               "// $1 your name $CURRENT_YEAR-$CURRENT_MONTH-$CURRENT_DATE"
           ],
           "description": "commet with your name and data"
       },
       "commet with your name and data css": {
           "scope": "css, less",
           "prefix": "any prefix you want",
           "body": [
               "/* $1 your name $CURRENT_YEAR-$CURRENT_MONTH-$CURRENT_DATE */"
           ],
           "description": "commet with your name and data"
       },
       "commet with your name and data html": {
           "scope": "html, htm, jsp, vue-html",
           "prefix": "any prefix you want",
           "body": [
               "<!-- $1 your name $CURRENT_YEAR-$CURRENT_MONTH-$CURRENT_DATE -->"
           ],
           "description": "commet with your name and data"
       }
   }
   

   该自定义片段可以生成带有日期的注释

setting sync详细介绍

• setting sync插件文档