什么是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()]
})
插件地址
