前端vscode 常用插件 及配置整理

一、VsCode 前端常用插件推荐

vscode既拥有高自由度、又拥有高性能和高颜值，最关键的是，vscode还是一款免费并且有团队持续快速更新的代码编辑器。所以vscode是代码编辑器的首选，个人推荐编写前端代码时，代码编辑器选择vscode

1.1 vscode 如何安装插件

vscode安装插件只需要点击图片所示按钮，即可进入拓展，在搜索框中输入插件名点击安装后，等待安装好即可点击重新加载重启vscode使得插件生效。

当你不需要某个插件时只需要进入扩展，点击对应插件右下角的齿轮按钮即可选择禁用或卸载该插件。

1.2 前端必备常用插件

• Chinese (Simplified) (必备)：vscode汉化包
• HTML Boilerplate (必备)：通过使用 HTML 模版插件，你就摆脱了为 HTML 新文件重新编写头部和正文标签的苦恼。你只需在空文件中输入 html，并按 Tab 键，即可生成干净的文档结构。
• HTML Snippets (必备)：智能提示HTML标签，以及标签含义
• HTML CSS Support (必备)：智能提示CSS类名以及id
• Color Info（必备）：提供你在 CSS中使用颜色的相关信息。你只需在颜色上悬停光标，就可以预览色块中色彩模型的（HEX、 RGB、HSL 和 CMYK）相关信息了。
• CSS Peek（必备）：使用此插件，你可以追踪至样式表中 CSS 类和 ids 定义的地方。当你在 HTML 文件中右键单击选择器时，选择“ Go to Definition 和 Peek definition ”选项，它便会给你发送样式设置的 CSS 代码。
• cssrem（必备）：一个 px 与 rem 单位互转的 VSCode 插件
• Easy LESS：它可以直接编译less 自动保存为css文件
• Auto Close Tag (必备)：自动闭合HTML/XML标签
• Auto Rename Tag (必备)：自动完成另一侧标签的同步修改
• Prettier：格式化JavaScript / TypeScript / CSS
• ESLint (推荐)：js语法纠错，可以自定义配置，不过配置较为复杂，建议使用网上一些广泛使用的eslint配置，日后我也会专门针对eslint配置写一篇文章。
• JavaScript(ES6) code snippets (必备)：ES6语法智能提示，以及快速输入，不仅仅支持.js，还支持.ts，.jsx，.tsx，.html，.vue，省去了配置其支持各种包含js代码文件的时间
• Open in Browser(必备):支持快捷键与鼠标右键快速在浏览器中打开html文件，支持自定义打开指定的浏览器，包括：Firefox，Chrome，Opera，IE以及Safari
• Path Intellisense (必备)：自动提示文件路径，支持各种快速引入文件
• npm（必备）：让VSCode支持npm
• Vetur (vue开发必备)：Vue多功能集成插件，包括：语法高亮，智能提示，emmet，错误提示，格式化，自动补全，debugger。vscode官方钦定Vue插件，Vue开发者必备。
• jQuery Code Snippets (jquery开发必备):jQuery代码智能提示
• VueHelper：vue代码片段
• Vue TypeScript Snippets：vue的 typescript 代码片段
• Vue 2 Snippets：vue 2代码片段

二、编辑器setting.json设置

点击左上角 文件 -> 首选项 -> 设置 ->

在vscode编辑器 setting.json 中加如下配置

{
    // vscode默认启用了根据文件类型自动设置tabsize的选项
   "editor.detectIndentation": false,
   // 重新设定tabsize
   "editor.tabSize": 2,
   // #每次保存的时候自动格式化 
   "editor.formatOnSave": true,
   // #每次保存的时候将代码按eslint格式进行修复
   "eslint.autoFixOnSave": true,
   // 添加 vue 支持
   "eslint.validate": [
       "javascript",
       "javascriptreact",
       {
           "language": "vue",
           "autoFix": true
       }
   ],
   //  #让prettier使用eslint的代码格式进行校验 
   "prettier.eslintIntegration": true,
   //  #去掉代码结尾的分号 
   "prettier.semi": false,
   //  #使用带引号替代双引号 
   "prettier.singleQuote": true,
   //  #让函数(名)和后面的括号之间加个空格
   "javascript.format.insertSpaceBeforeFunctionParenthesis": true,
   // #这个按用户自身习惯选择 
   "vetur.format.defaultFormatter.html": "js-beautify-html",
   // #让vue中的js按编辑器自带的ts格式进行格式化 
   "vetur.format.defaultFormatter.js": "vscode-typescript",
   "vetur.format.defaultFormatterOptions": {
       "js-beautify-html": {
           "wrap_attributes": "force-aligned"
           // #vue组件中html代码格式化样式
       }
   },
}

三、在VsCode里面设置vue文件模板

首先：我们要找到这个模板设置的入口

在文件 - > 首选项 - > 用户代码片段

选中以后，会出现下面这个输入框，新建一个vue.json全局代码片段文件，输入vue.json然后回车。

然后在vue.json 里面将下面代码粘贴进去，然后保存

{
  "vue-template": {
    "prefix": "vue",
    "body": [
      "",
      "",
      "",
      ""
    ]
  }
}

之后再写.vue文件，只要输入vue就会出现相对应的代码提示

按enter键就可以直接快速创建一个完整的vue文件模板了