给vscode和@/vue-cli_4.x项目初始化eslint

前言

使用vscode，并且使用@/vue-cli初始化vue项目后，vue项目自带eslint，但若想自定义或从package.json中分离eslint配置，可以遵循如下做法。此做法适用于用webpack初始化的项目，自定义eslint用。

步骤

vscode

先配置vscode，使得vscode支持自行检查eslint规范，进行错误警或自动纠正，这里建议开启错误警告和自动纠正，强制性便于代码风格一致。

在 设置 中打开 settings.json 文件，并在其中添加如下配置：

{
   
	......
	 // eslint
    "eslint.options": {
   
        "extensions": [
            ".js",
            ".vue"
        ]
    },
    "eslint.validate": [
        "javascript",
        "javascriptreact",
        "vue-html",
        "vue",
        "html",
    ],
    "eslint.run": "onSave",
    "editor.codeActionsOnSave": {
   
        "source.fixAll.eslint": true
    },
}

eslint

在项目中配置自己的eslint

1. npm install -g eslint：全局安装eslint（可选）
2. 在项目根目录使用eslint --init命令，初始化.eslintrc.*文件，
   这里我在初始化时选择了vue项目，使用.eslintrc.json
3. 在项目根目录创建commlitlint.config.js：

module.exports = {
   extends: ['@commitlint/config-conventional']};

4. 补充.eslintrc.json中的内容，可以按照eslint官网自定义，这里给出自己本人使用的.eslintrc.json：

{
   
    // root 表示根 eslint，找到后不会再去父目录找了
    "root": true,
    // env 表示当前 eslint 使用环境
    "env": {
   
        "browser": true,
        "node": true