VS Code 前端开发常用插件及配置

HTML/CSS

1. HTML CSS Support——在HTML文件中提示CSS
2. Easy LESS——将LESS自动编译为CSS

   "less.compile": {
     "compress": false, // 是否压缩
     "sourceMap": false, // 是否开启SourceMap，用于查看源文件行数
     "out": "${workspaceRoot}\\css\\", // 输出路径
     "outExt": ".css" // 输出文件的后缀
   }

3. Easy Sass——将SCSS自动编译为CSS

   "easysass.formats": [
     {
       "format": "compressed", // 压缩
       "extension": ".min.css"
     },
     {
       "format": "expanded", // 未压缩
       "extension": ".css"
     }
   ],
   "easysass.targetDir": "", // 输出路径
   "easysass.compileAfterSave": true

JS/TS/Vue

1. Code Runner——直接运行 .js .ts 结尾的文件（需安装node与ts-node）

   "code-runner.runInTerminal": true,
   "code-runner.saveFileBeforeRun": true,

   ts-node安装：npm install -g ts-node
2. JavaScript (ES6) code snippets——智能提醒ES6语法
3. Volar——Vue3 语法提示

通用工具

1. open in browser——在浏览器打开页面
2. Live Server——启动一个本地服务器，页面可以自动刷新
3. Project Manager——管理多个项目
4. CodeSnap——生成代码截图
5. Path Intellisense——路径提示

   "path-intellisense.mappings": {
       "@": "${workspaceRoot}/src"
   },

6. Prettier——格式化代码

   "prettier.printWidth": 150, // 超过最大值换行
   "prettier.tabWidth": 2, // tab 2格
   "prettier.semi": true, // 句尾添加分号
   "prettier.arrowParens": "always", // 添加括号
   "prettier.trailingComma": "none", // 在对象或数组最后一个元素后面是否加逗号（在ES5中加尾逗号）
   "prettier.singleQuote": true, // 使用单引号代替双引号

过时插件

1. Auto Close Tag——自动添加闭合标签（VS Code 已内置该功能）

   // 在typescript中不启用auto-close-tag
   "auto-close-tag.disableOnLanguage": [
       "typescript"
   ],

2. Auto Rename Tag——标签改名时，自动添加（VS Code 已内置该功能）

   "editor.linkedEditing": true

3. HTML Snippets——HTML代码片段（VS Code 已内置该功能）
4. Settings Sync——同步插件（VS Code 已内置该功能）
5. Bracket Pair Colorizer 2——彩虹括号（VS Code 已内置该功能）

   "editor.bracketPairColorization.enabled": true

6. Vetur ——Vue2插件，已过时

   "vetur.validation.template": false, // 关闭EsLint
   "vetur.experimental.templateInterpolationService": true, // 在template上开启代码提示

7. Beautify——代码格式化，已过时