什么是eslint
ESLint 是一个根据方案识别并报告 ECMAScript/JavaScript 代码问题的工具，其目的是使代码风格更加一致并避免错误。
安装eslint
npm init @eslint/config
执行后会有很多选项，按照自己的需求去选择就好，运行成功后会生成 .eslintrc.js 或者 .eslintrc.json 或者 .eslintrc.yml 的文件，看自己的选择
配置eslint
以.eslintrc.js文件为例
module.exports = {
"env": {
"browser": true,
"es2021": true
},
"extends": [
"eslint:recommended",
"plugin:vue/vue3-essential"
],
"overrides": [
{
"env": {
"node": true
},
"files": [
".eslintrc.{js,cjs}"
],
"parserOptions": {
"sourceType": "script"
}
}
],
"parserOptions": {
"ecmaVersion": "latest",
"sourceType": "module"
},
"plugins": [
"vue"
],
"rules": {
}
}
我们只需要关注 rules 即可，这个也是十分重要配置选项
选项的配置规则如下
"off"或者0- 关闭规则"warn"或1- 打开规则作为警告（不影响退出代码）"error"或者2- 将规则作为错误打开（退出代码将为 1
常用的配置选项，后面可以根据团队中相互规定即可，没有十分明确的答案
eqeqeq: 2,
'no-dupe-args': 'error',
'no-dupe-keys': 'error',
'no-self-compare': 'error',
'no-self-assign': 'error',
'no-unused-vars': 'error',
'no-const-assign': 'error',
'no-func-assign': 'error',
camelcase: 'error',
'no-mixed-spaces-and-tabs': 'error',
quotes: ['warn', 'single'],
'vue/multi-word-component-names': 0,
camelcase: 0,
'no-unused-vars': 0,
更多配置选项
编辑器配置eslint校验
在开发中eslint不能够实时的反馈出错误信息，导致很无用，或者就是写完了代码，然后在使用eslit去校验很不方便，所以各大编辑器对此都有用各自的插件配置
1.VScdoe
打开插件中搜索eslint下载安装即可
2.HBuilder X
下载插件eslint-js,如果你是需要检查vue的文件还需要下载eslint-plugin-vue
3. WebStorm
这个不需要安装，貌似是自带了，只要项目的更目录下有**.eslintrc.js** 或者 .eslintrc.json 或者 .eslintrc.yml ，就会自动的去匹配，右击使用eslint 格式化即可
搭配vite
在搭配vite的时候可以随时将错误信息展示在浏览器的页面上
1.@nabla/vite-plugin-eslint
下载插件
yarn add --dev @nabla/vite-plugin-eslint
使用
import { defineConfig } from "vite";
import eslintPlugin from "@nabla/vite-plugin-eslint";
export default defineConfig({
plugins: [eslintPlugin()],
});
插件地址
2.vite-plugin-eslint
下载插件
npm install eslint vite-plugin-eslint --save-dev
# or
yarn add eslint vite-plugin-eslint -D
使用
import { defineConfig } from 'vite'
import eslint from 'vite-plugin-eslint'
export default defineConfig({
plugins: [eslint()]
})
插件地址
