让你的 VS Code 好用多彩起来 （vscode 配置大全）

在 扩展 面板 搜索想要安装的插件，然后点击右下角的 安装（install）即可。

插件名称	插件描述
Chinese(Simplified)	汉化。
Beautify	语法高亮，格式化代码。
ESlint	代码规范，对不符合要求或有语法错误的JS代码进行提示，可以自定制提示规则。
Bracket Pair Colorizer	成对的彩色括号。
Indent-Rainbow	带颜色的缩进。
vscode-icons	为文件管理器增加文件类型图标。
Path Autocomplete	路径补全工具。
Vetur	Vue 工具插件，语法高亮、智能感知。
Vue VSCode Snippets	很全面的vue代码片段。
GitLens — Git supercharged	显示每一行代码的作者以及提交时间。
Todo Tree	点击左侧栏 “树” 的 logo，显示 TODOList 条目，点击相应的条目，可以打开文件并定位到 TODO 行。

💡 如果想在 VS Code 里使用 markdown：

• 新建 .md 文件
• Shift + Command + V 预览文件内容

💡 如果想修改代码规范的缩进，保存代码时自动格式化：

• https://www.jianshu.com/p/acdc1fbb3648

• Code --> 首选项 --> 设置 --> 右上角 {} --> 增加以下代码并保存：

  "editor.detectIndentation": false,
  "editor.tabSize": 2, // 设置 tab 键的缩进量
  "editor.formatOnSave": true, // 保存的时候自动格式化
  

💡 如果你想让 html 代码保持标签属性不换行：

• https://www.jianshu.com/p/63501efa20a4

• Code --> 首选项 --> 设置 --> 右上角 {} --> 增加以下代码并保存：

  "vetur.format.defaultFormatter.html": "js-beautify-html",
  "vetur.format.defaultFormatterOptions": {
      "js-beautify-html": {
        "wrap_line_length": 200, // 数值越大，一行放的属性越多
        "wrap_attributes": "auto",
        "end_with_newline": false
      }
  }
  

💡 如果想在 Vue 文件中快速生成注释代码段：

• https://blog.csdn.net/weixin_30945319/article/details/101842542

• Code --> 首选项 --> 用户代码片段 --> vue.json

  {
  	"Print to console": {
          "prefix": "note_vue",
          "body": [
              "<!--",
              "  功能：${1:功能描述}",
              "  作者：censek",
              "  时间：$CURRENT_YEAR年$CURRENT_MONTH月$CURRENT_DATE日 $CURRENT_HOUR:$CURRENT_MINUTE:$CURRENT_SECOND",
              "  版本：v1.0",
              "-->",
          ],
          "description": "Log output to console"
  	}
  }
  

• note_vue

💡 如果想在 js 文件中快速生成注释代码段：
（方法同上）

• Code --> 首选项 --> 用户代码片段 --> javascript.json

  {
  	"Function note": {
  		"prefix": "note_js",
  		"body": [
  			"/**",
  			" * @Name: $1",
  			" * @Description: $2",
  			" * @Param:  ",
  			" * @Return: ",
  			" * @Author: censek",
  			" * @Date: ${CURRENT_YEAR}-${CURRENT_MONTH}-${CURRENT_DATE} ${CURRENT_HOUR}:${CURRENT_MINUTE}:${CURRENT_SECOND}",
  			" */"
  		],
  		"description": "function note"
  	}
  }
  

• note_js
  
  

💡 如果想配置 swagger：

• Code --> 首选项 --> 用户代码片段 --> javascript.json

  {
  	"swagger": {
  		"prefix": "swagger",
  		"body": [
  			"/**",
  			" * @swagger",
  			" * /$1:",
   			" *   get:",
  			" *     tags:",
  			" *       - 生产管理小程序",
  			" *     description: $2",
  			" *     produces:",
  			" *       - application/json",			 
  			" *     parameters:",
  			" *       - name: $3",
  			" *         description: $4",
  			" *         in: query",
  			" *         required: true",	
  			" *       - name: $5",
  			" *         description: $6",
  			" *         in: query",
  			" *         required: true",
  			" *     responses:",
  			" *       200:",
  			" *         description: $7",
  			" */"
  		],
  		"description": "swagger"
  	}
  }
  

• swagger

推荐链接 👉 高效的编码：VS Code 设置