一、eslint

eslint规范的是代码偏向语法层面上的规则。

二、prettier

prettier规范的是代码偏向排版层面上的风格。

三、解决eslint和prettier的冲突问题

VUE项目配置示例（vscode）

• 开始之前

删除package.json内所有和eslint相关的包。

删除node_modules并重新npm i

• Eslint配置

1. 项目安装eslint

npm install eslint --save-dev

使用命令 --save 或者说不写命令 --save ,都会把信息记录到 dependencies 中； dependencies 中记录的都是项目在运行时需要的文件；使用命令 --save-dev 则会把信息记录到 devDependencies 中；devDependencies 中记录的是项目在开发过程中需要使用的一些文件，在项目最终运行时是不需要的；也就是说我们开发完成后，最终的项目中是不需要这些文件的；

2. 运行以下命令，生成.eslintrc.js

npx eslint --init

npx是一个由Node.js官方提供的用于快速执行npm包中的可执行文件的工具。它可以帮助我们在不全局安装某些包的情况下，直接运行该包提供的命令行工具。npx会在执行时，检查本地项目中是否安装了对应的依赖，如果没有安装则会自动下载安装，并执行命令。如果本地已经存在该依赖，则直接执行命令。

js版+ts版

js：

ts： 步骤拆解（js和ts只有第7步不同）：

1. 

2. 

3. 

4. 

5. 

6. 

7. js或ts使用不同规则

8. 

9. 

10. 

完成之后会在项目根目录生成.eslintrc.js文件

module.exports = {
    "env": {
        "browser": true,
        "es2021": true
    },
    "extends": [
        "standard-with-typescript",
        "plugin:vue/vue3-essential"
    ],
    "overrides": [
        {
            "env": {
                "node": true
            },
            "files": [
                ".eslintrc.{js,cjs}"
            ],
            "parserOptions": {
                "sourceType": "script"
            }
        }
    ],
    "parserOptions": {
        "ecmaVersion": "latest",
        "sourceType": "module"
    },
    "plugins": [
        "vue"
    ],
    "rules": {
    }
}

以上代码，写在extends中的这部分规则，写在后面的会覆盖前面的；并且写在rules中的规则会覆盖所有之前的规则。所以自定义规则写在rules中。

4. 设置保存时自动修复

此时,执行 eslint index.js --fix可以修复已存在 的eslint语法错误

但是每次执行这个命令会很麻烦,所以可以通过修改vscode的配置项,保存时就进行修复

需要用到eslint的vscode插件

1. 安装插件：
2. 配置保存时自动格式化

将以下配置加入settings.json

    "editor.formatOnType": true,
    "editor.formatOnSave": true,
    "eslint.codeAction.showDocumentation": {
        "enable": true
    },
    "editor.codeActionsOnSave": {
        "source.fixAll.eslint": true,
    },
    "eslint.validate": [
        "javascript",
        "javascriptreact",
        "html",
        "vue"
    ]

此时 ctrl+s 保存代码时就能修复eslint部分错误。

• Prettier配置

1. 执行npm i prettier -D命令安装prettier

安装完之后 执行npx prettier --write +对应文件 即可进行代码风格格式化,凌乱的代码会变得工整

2. 创建.prettier.js文件

// .prettier.js
module.exports = {
    semi: false,// 格式化不加分号
    singleQuote: false, // 格式化以单引号为主
}

3. 保存时自动进行风格优化

需要用到prettier的vscode插件 设置自动保存

将以下配置加入settings.json(同上一步)

//setting.json文件
"[vue]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[javascript]": {
        "editor.defaultFormatter": "vscode.typescript-language-features"
    },
    "[html]": {
        "editor.defaultFormatter": "vscode.html-language-features"
    },
    "[typescript]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[typescriptreact]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[javascriptreact]": {
        "editor.defaultFormatter": "vscode.typescript-language-features"
    },

eslint和prettier的默认格式化规则有冲突

执行命令npm i eslint @vue/eslint-config-prettier eslint-config-prettier eslint-plugin-prettier eslint-plugin-vue prettier -D

解决eslint和prettier的冲突问题

修改.eslint.js文件为

// eslintrc.js
module.exports = {
  env: {
    browser: true,
    es2021: true,
  },
  extends: [
    "@vue/prettier",
    "plugin:vue/vue3-essential",
    "eslint:recommended",
    "airbnb-base",
  ],
  parserOptions: {
    ecmaVersion: "latest",
    parser: "@typescript-eslint/parser",
    sourceType: "module",
  },
  plugins: ["vue", "@typescript-eslint"],
  rules: {
    quotes: [1, "double"], // 强制使用双引号
    semi: 1, // 末尾分号警告
    indent: "off", // 关闭eslint缩进警告
    "max-len": ["error", { code: 120 }], // 每行最大长度120字符
    "no-console": 0, // 关闭console报错
    "space-before-function-paren": ["error", "never"], // 禁止函数名前后有空格
    "keyword-spacing": ["error", { before: true, after: true }], // 关键字后面是否要空一格
    "no-debugger": 2, // 禁止使用debugger
    "comma-dangle": "off",
  },
  globals: {
    // 全局变量忽略检测
    configUrl: "readonly",
  },
};

.prettier.js

// .prettier.js
module.exports = {
    semi: false,// 格式化不加分号
    singleQuote: false, // 格式化以单引号为主
    useTabs: false
}  

添加.eslintignore文件忽略校验(可根据需要自行添加)

// .eslintignore
/public
/src/utils
/dist

使用路径别名导致的ctrl+左键无法进入对应文件问题

原因是Path Intellisense 插件无法读取别名

解决方法:

vs Code 的setting.json中新增:

 "path-intellisense.mappings": {
        "@": "${workspaceRoot}/src",
        "_c": "${workspaceRoot}/src/components",
    },

解决路径别名报错问题

.eslintrc.js新增setting

//.eslintrc.js
 settings: {
    "import/resolver": {
      webpack: {
        config: path.join(__dirname, './build/webpack.base.config.js')
      },
      alias: [["/@", "./src"]], //自行配置
    },
  },

设置缩进以及行尾序列

根目录下新建文件.editorconfig

root = true
 
[*]
charset = utf-8
indent_style = space
indent_size = 2
end_of_line = lf
insert_final_newline = false
trim_trailing_whitespace = false

主动修复

按照上述流程设置完成之后,重启一下vscode

ctrl+s即可实现代码风格统一+代码基础错误修复

目前只实现了基础的一版,像变量或者方法未使用等错误类型还需手动修复 不过eslint都会进行提示

部分错误可以通过快捷修复的方式进行修复

没有快捷修复的地方会有eslint的错误提示;

• 安装Vetur