vscode配置ESLint

VSCode安装ESLint扩展

NPM安装ESLint

# 全局安装(推荐)
npm install eslint -g

# 项目根目录本地安装
npm install eslint --save-dev

1.自定义配置规则

全局配置

在当前用户根目录下执行eslint --init,根据个人喜好选择生成配置文件.eslintrc.json
项目根目录配置

在当前用户根目录下执行eslint --init,根据个人喜好生成配置文件

具体配置参考: http://eslint.cn/docs/user-guide/configuring

2.使用第三方配置规则

这里选择的是Airbnb的配置规则

查看Airbnb标准依赖插件版本

1	npm info "eslint-config-airbnb-base@latest" peerDependencies

本人查询的版本要求:

1	{
2	eslint: '^4.19.1 \|\| ^5.3.0',
3	'eslint-plugin-import': '^2.14.0'
4	}

安装对应版本的插件

1	npm install eslint-config-airbnb-base eslint@^#.#.# eslint-plugin-import@^#.#.# -g

安装babel-eslint插件
1
npm install babel-eslint -g

更改配置文件.eslintrc.json

{
    // 要启用的环境
    "env": {
        "browser": true,
        "es6": true,
        "node": true
    },
    // 启用 airbnb 规则
    "extends": "airbnb-base",
    // 使用语言及版本
    "parserOptions": {
        "parser": "babel-eslint",
        "ecmaVersion": 2017,
        "sourceType": "module"
    },
    // 个人自定义规则
    "rules": {
        "no-console":"off",
        "no-plusplus":"off"
    }
}

ESLint支持html以及Vue单文件组件

安装eslint-plugin-html和eslint-plugin-vue插件

1	npm install eslint-plugin-html eslint-plugin-vue -g

在VSCode设置中添加配置

// ESLint 配置
"eslint.enable": true,
// 保存时是否自动修复
"eslint.autoFixOnSave": false,
//nodejs路径
"eslint.nodePath": "/home/song/.nvm/versions/node/v10.9.0/bin/node",
"eslint.options": {
    // 配置文件的地址
    "configFile": "",
},
"eslint.validate": [
    "javascript",
    "javascriptreact",
    // 启用html和vue中ESLint验证和自动修复
    {
        "language": "html",
        "autoFix": true
    },
    {
        "language": "vue",
        "autoFix": true
    }
]

在这里涉及到了node的安装路径, 由于是通过命令行安装的,所以不知道默认的安装路径是什么,可以通过下面的代码进行查询

1	which node

1	# 全局安装(推荐)
2	npm install eslint -g
3
4	# 项目根目录本地安装
5	npm install eslint --save-dev

1	{
2	// 要启用的环境
3	"env": {
4	"browser": true,
5	"es6": true,
6	"node": true
7	},
8	// 启用 airbnb 规则
9	"extends": "airbnb-base",
10	// 使用语言及版本
11	"parserOptions": {
12	"parser": "babel-eslint",
13	"ecmaVersion": 2017,
14	"sourceType": "module"
15	},
16	// 个人自定义规则
17	"rules": {
18	"no-console":"off",
19	"no-plusplus":"off"
20	}
21	}

1	// ESLint 配置
2	"eslint.enable": true,
3	// 保存时是否自动修复
4	"eslint.autoFixOnSave": false,
5	//nodejs路径
6	"eslint.nodePath": "/home/song/.nvm/versions/node/v10.9.0/bin/node",
7	"eslint.options": {
8	// 配置文件的地址
9	"configFile": "",
10	},
11	"eslint.validate": [
12	"javascript",
13	"javascriptreact",
14	// 启用html和vue中ESLint验证和自动修复
15	{
16	"language": "html",
17	"autoFix": true
18	},
19	{
20	"language": "vue",
21	"autoFix": true
22	}
23	]