vscode下vue项目中eslint的使用方法

前言

在vscode的vue项目中，关于代码检查和格式化，遇到各种各样的问题，比如：

以下通过自己的实践，进行了相应配置，目前可以实现：

vscode 拓展安装

eslint 拓展

该拓展本身不带任何插件，当前项目要使用该拓展，需要安装相应的npm包（全局安装或当前项目安装）

对于 vue 项目，通常在 vscode 中做如下设置:

 //保存时自动修复代码 "eslint.autoFixOnSave": true, "eslint.options": {  // 应检查代码的文件扩展名数组  "extensions": [   ".js",   ".vue"  ] }, // 配置要验证的语言标识和自动修复选项，比前面两个配置的结合更为细粒度话。可以仅配置下面代码 "eslint.validate": [  "javascript",  "javascriptreact",  "html",  {   "language": "vue",   "autoFix": true  } ],

vetur 拓展

vue 工具，主要有以下功能

Syntax-highlighting 语法高亮

Snippet 快速定义脚手架代码片段，如：写script后会跳出export default{xxx},style 后面会带lang、scope等

Emmet 仿css选择器快速生成 html/css 代码

Linting / Error Checking vetur的 Linting 仅用于快速启动，对于规则配置需要用eslint.validate

Linting 不可配置，且自带了一个固定版本的eslint-plugin-vue，一般我们不用。而是采用以下配置：

vscode中设置"vetur.validation.template": false 安装ESlint拓展，错误处理将走eslint 项目中安装npm i -D eslint eslint-plugin-vue插件 在.eslintrc.*设置eslint规则,后面会介绍eslintrc相关配置

Formatting 即右键的Format Document功能，不支持格式化选中内容。

可以在设置中配置vetur.format.defaultFormatter / 如：默认"vetur.format.defaultFormatter.html": "prettyhtml",也可将值设为 none 就不会格式化该类文件了 / 这个默认设置非常难用，会将vue文件变得很乱，比如默认加分号，属性按列展开；我们在设置中进行如下配置即可实现格式化vue文件时按eslint的规则来

"vetur.format.defaultFormatterOptions": {"js-beautify-html": {// 属性列太长才折行,默认的force-expand-multiline不美观"wrap_attributes": "auto"},"prettier": {//去掉代码结尾分号"semi": false,//使用eslint的代码格式进行校验"eslintIntegration": true,//采用单引号"singleQuote": true}},//格式化.vue中html，js"vetur.format.defaultFormatter.html": "js-beautify-html","vetur.format.defaultFormatter.js": "vscode-typescript",//让函数(名)和后面的括号之间加个空格"javascript.format.insertSpaceBeforeFunctionParenthesis": true,