这样配置，让你的VS Code好用到飞起！

关注“前端学苑” ，坚持每天进步一点点

「~工具vscode配置~」

Visual Studio Code (简称 VS Code / VSC) 是一款免费开源的现代化轻量级代码编辑器，支持几乎所有主流的开发语言的语法高亮、智能代码补全、自定义热键、括号匹配、代码片段、代码对比 Diff、GIT 等特性。提高软件开发的效率，让你有更多的时间去撸代码。

工欲善其事必先利其器，趁手的工具会使我们开发事半功倍。

一、项目实践

分屏功能

写代码的时候经常碰到的一个场景就是不同的文件之间进行操作，俩个文件来回切换特别麻烦。

其实你熟练掌握了 vscode 的分屏操作这里能够让你爽到飞起。

二、常用插件

ESLint

代码格式校验，支持自定义配置，错误是红色的波浪线，警告是绿色的。

例如：

如果不符合之前配置eslint规则的，就会出现红色波浪线，鼠标移上去 会显示具体的错误。

Auto Rename Tag  

自动重命名配对的HTML / XML标签(必备)。

例如：<Headerabc></Headerabc>

Bracket Pair Colorizer

这个扩展允许用颜色来标识匹配的括号。用户可以定义要匹配的字符和要使用的颜色。

例如：

成对的括号（大括号，小括号）颜色相同，这在代码多层括号嵌套时显得尤为重要。

Git History

查看git提交的历史记录

例如：

查看修改记录，或者需要查看谁提交了什么文件。

Git supercharged

每一行 code 的作者、提交时间、commit log 等信息，一目了然。

例如：

如果开发是vscode+git,这个插件强烈推荐，一眼就能看到是谁改了你的代码。

koroFileHeader

用于添加文件头部注释，函数注释。

例如：

1､设置自动生成注释

"fileheader.configObj": {
  "autoAdd": true  //自动生成注释，老是忘记的同学可以设置
},

2､文件头部注释

  "fileheader.customMade": {
    "Description":"" ,//文件内容描述
    "Author":"huacong",//编辑人
    "Date": "Do not edit",//时间
    "LastEditTime": "Do not edit",
    "LastEditors": "huacong",
  }

文件头部添加注释：快捷键：window：ctrl+alt+i，mac：ctrl+cmd+i

3､函数注释

"fileheader.cursorMode": {
    "description":"",
    "param ":"",
    "return":""
  },

在光标处添加函数注释：快捷键：window：ctrl+alt+t,mac：ctrl+cmd+t

三、上代码，推荐vscode设置

{
  "workbench.editor.enablePreview": false, //打开文件不覆盖
  "search.followSymlinks": false, //关闭rg.exe进程
  "editor.minimap.enabled": false, //关闭快速预览
  "liveServer.settings.donotShowInfoMsg": true, //关闭liveserver提示
  // "files.autoSave": "afterDelay", //打开自动保存
  "editor.fontSize": 16, //设置文字大小
  "editor.lineHeight": 24, //设置文字行高
  "editor.lineNumbers": "on", //开启行数提示
  "editor.quickSuggestions": {
    //开启自动显示建议
    "other": true,
    "comments": true,
    "strings": true
    },
"window.zoomLevel": 0, // 调整窗口的缩放级别
"editor.tabSize": 2, //制表符符号eslint
// "editor.formatOnSave": true, //每次保存自动格式化
"eslint.autoFixOnSave": true, // 每次保存的时候将代码按eslint格式进行修复
// #让prettier使用eslint的代码格式进行校验
"fileheader.configObj": {
  "autoAdd": true // 默认开启
},
// #使用带引号替代双引号
"prettier.singleQuote": false,
"vetur.format.defaultFormatterOptions": {
"prettier": {
  "eslintIntegration": true,
  "semi": false
}
},
//让函数(名)和后面的括号之间加个空格
"javascript.format.insertSpaceBeforeFunctionParenthesis": false, 
//让vue中的js按编辑器自带的ts格式进行格式化
"vetur.format.defaultFormatter.js": "vscode-typescript", 
// "vetur.format.defaultFormatter.html": "js-beautify-html",
"eslint.validate": [
//开启对.vue文件中错误的检查
"javascript",
"javascriptreact",
{
  "language": "html",
  "autoFix": true
},
{
  "language": "vue",
  "autoFix": true
}
],
"workbench.iconTheme": "vscode-icons",
"explorer.confirmDelete": false,
// 文件头部注释
"fileheader.customMade": {
  "Author": "name",
  "Date": "Do not edit",
  "LastEditors": "name",
  "LastEditTime": "Do not Edit",
  "Describe": ""
},
//函数注释
"fileheader.cursorMode": {
  "Description": "",
  "param": ""
},
"[javascript]": {
  "editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[typescript]": {
  "editor.defaultFormatter": "vscode.typescript-language-features"
},
"editor.wordWrap": "on",
"editor.codeActionsOnSave": {
  "source.fixAll.eslint": true
  }
}

四、遇到的坑

保存前代码：

<el-input v-model="form.name"></el-input>

保存后代码：

<el-input v-model="form.name" />

找方法：

1、处理方法：

format- html 选择 HTML Format Enable

2、 .eslintrc.js文件

在rules中添加以下配置

"vue/html-self-closing": ["error",{
"html": {
"void": "never",
"normal": "any",
"component": "any"
},
"svg": "always",
"math": "always"
}]

觉得本文对你有帮助？请分享给更多人

关注「前端学苑」加星标，提升前端技能