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