1.创建一个vite项目
使用包管理工具创建一个vite项目。
npm init vite@latest# 或者使用 yarn createyarn create vite# 或者使用 pnpmpnpm create vite
2.安装eslint
npm install eslint -D# 或者使用 yarnyarn add eslint -D# 或者使用 pnpmpnpm add eslint -D
3. 初始化eslint配置文件
在项目根目录下运行以下命令，初始化eslint配置文件。
npx eslint --init
3.1 选择配置模式
You can also run this command directly using 'npm init @eslint/config'.
? How would you like to use ESLint? ... To check syntax only
> To check syntax and find problems
3.2 选择项目语言
? What type of modules does your project use? ...
> JavaScript modules (import/export)CommonJS (require/exports)None of these
3.3 选择项目框架
? Which framework does your project use? ...React
> Vue.jsNone of these
3.4 是否使用TypeScript
? Does your project use TypeScript? » No / Yes
3.5 选择项目环境
? Where does your code run? ...
> BrowserNode
3.6 选择安装对应插件
The config that you've selected requires the following dependencies:eslint, globals, @eslint/js, eslint-plugin-vue
? Would you like to install them now? » No / Yes
3.7 选择项目包管理器
? Which package manager do you want to use? ...
> npmyarnpnpmbun
4.初始化完成
初始化之后就会在根目录下创建一个eslint.config.mjs文件，这个就是eslint的配置文件。
# eslint.config.mjsimport globals from "globals";import pluginJs from "@eslint/js";import pluginVue from "eslint-plugin-vue";export default [{files: ["**/*.{js,mjs,cjs,vue}"]},{languageOptions: { globals: {...globals.browser, ...globals.node} }},pluginJs.configs.recommended,...pluginVue.configs["flat/essential"],{rules: {// TODO: 配置规则}}];
5.安装 vite-plugin-eslint
这个插件主要还是用来在vite项目中打包运行时来检查代码规范的，如果项目中的代码规范要求比较严格，可以使用，也可以不装这个，对eslint的代码报错提示等不会影响。
npm install vite-plugin-eslint -D
配置
在vite.config.js中配置
import { defineConfig } from 'vite'import vue from '@vitejs/plugin-vue'import eslintPlugin from 'vite-plugin-eslint' //导入包export default defineConfig({plugins: [vue(),// 增加下面的配置项,这样在运行时就能检查eslint规范eslintPlugin({include: ['src/**/*.js', 'src/**/*.vue', 'src/*.js', 'src/*.vue']})]})
6.安装eslint-parser
npm add -D @babel/core npm add -D @babel/eslint-parser
7.配置eslint校验规则
rules: {'semi': ['warn', 'never'], // 禁止尾部使用分号'no-console': 'warn', // 禁止出现console'no-debugger': 'warn', // 禁止出现debugger'no-duplicate-case': 'warn', // 禁止出现重复case'no-empty': 'warn', // 禁止出现空语句块'no-extra-parens': 'warn', // 禁止不必要的括号'no-func-assign': 'warn', // 禁止对Function声明重新赋值'no-unreachable': 'warn', // 禁止出现[return|throw]之后的代码块'no-else-return': 'warn', // 禁止if语句中return语句之后有else块'no-empty-function': 'warn', // 禁止出现空的函数块'no-lone-blocks': 'warn', // 禁用不必要的嵌套块'no-multi-spaces': 'warn', // 禁止使用多个空格'no-redeclare': 'warn', // 禁止多次声明同一变量'no-return-assign': 'warn', // 禁止在return语句中使用赋值语句'no-return-await': 'warn', // 禁用不必要的[return/await]'no-self-compare': 'warn', // 禁止自身比较表达式'no-useless-catch': 'warn', // 禁止不必要的catch子句'no-useless-return': 'warn', // 禁止不必要的return语句'no-mixed-spaces-and-tabs': 'warn', // 禁止空格和tab的混合缩进'no-multiple-empty-lines': 'warn', // 禁止出现多行空行'no-trailing-spaces': 'warn', // 禁止一行结束后面不要有空格'no-useless-call': 'warn', // 禁止不必要的.call()和.apply()'no-var': 'warn', // 禁止出现var用let和const代替'no-delete-var': 'off', // 允许出现delete变量的使用'no-shadow': 'off', // 允许变量声明与外层作用域的变量同名'dot-notation': 'warn', // 要求尽可能地使用点号'default-case': 'warn', // 要求switch语句中有default分支'eqeqeq': 'warn', // 要求使用 === 和 !=='curly': 'warn', // 要求所有控制语句使用一致的括号风格'space-before-blocks': 'warn', // 要求在块之前使用一致的空格'space-in-parens': 'warn', // 要求在圆括号内使用一致的空格'space-infix-ops': 'warn', // 要求操作符周围有空格'space-unary-ops': 'warn', // 要求在一元操作符前后使用一致的空格'switch-colon-spacing': 'warn', // 要求在switch的冒号左右有空格'arrow-spacing': 'warn', // 要求箭头函数的箭头前后使用一致的空格'array-bracket-spacing': 'warn', // 要求数组方括号中使用一致的空格'brace-style': 'warn', // 要求在代码块中使用一致的大括号风格'camelcase': 'warn', // 要求使用骆驼拼写法命名约定'indent': ['warn', 4], // 要求使用JS一致缩进4个空格'max-depth': ['warn', 4], // 要求可嵌套的块的最大深度4'max-statements': ['warn', 100], // 要求函数块最多允许的的语句数量20'max-nested-callbacks': ['warn', 3], // 要求回调函数最大嵌套深度3'max-statements-per-line': ['warn', { max: 1 }], // 要求每一行中所允许的最大语句数量"quotes": ["warn", "single", "avoid-escape"], // 要求统一使用单引号符号"vue/require-default-prop": 0, // 关闭属性参数必须默认值"vue/singleline-html-element-content-newline": 0, // 关闭单行元素必须换行符"vue/multiline-html-element-content-newline": 0, // 关闭多行元素必须换行符// 要求每一行标签的最大属性不超五个'vue/max-attributes-per-line': ['warn', { singleline: 5 }],// 要求html标签的缩进为需要4个空格"vue/html-indent": ["warn", 4, {"attribute": 1,"baseIndent": 1,"closeBracket": 0,"alignAttributesVertically": true,"ignores": []}],// 取消关闭标签不能自闭合的限制设置"vue/html-self-closing": ["error", { "html": {"void": "always","normal": "never","component": "always"},"svg": "always","math": "always"}],"no-unused-vars": "warn", // 未使用的变量提示"quotes": ["error", "double"], // 强制使用双引号"vue/multi-word-component-names": "off" // 关闭组件名称多个单词的限制(建议必配)}
8.安装prettier (用于规范代码格式)
这边建议可以使用prettier进行代码格式化，可以避免一些不必要的错误，比如缩进、空格、换行等
npm i -D prettier
npm i -D eslint-config-prettier // eslint兼容的插件
npm i -D eslint-plugin-prettier // eslint的prettier
9.配置prettier
在根目录下创建一个prettier.config.js文件，并添加以下内容
module.exports = {tabWidth: 4, // 使用4个空格缩进semi: false, // 代码结尾是否加分号trailingComma: 'none', // 代码末尾不需要逗号singleQuote: true, // 是否使用单引号printWidth: 100, // 超过多少字符强制换行arrowParens: 'avoid', // 单个参数的箭头函数不加括号 x => xbracketSpacing: true, // 对象大括号内两边是否加空格 { a:0 }endOfLine: 'auto', // 文件换行格式 LF/CRLFuseTabs: false, // 不使用缩进符,而使用空格quoteProps: 'as-needed', // 对象的key仅在必要时用引号jsxSingleQuote: false, // jsx不使用单引号,而使用双引号jsxBracketSameLine: false, // jsx标签的反尖括号需要换行rangeStart: 0, // 每个文件格式化的范围是文件的全部内容rangeEnd: Infinity, // 结尾requirePragma: false, // 不需要写文件开头的 @prettierinsertPragma: false, // 不需要自动在文件开头插入 @prettierproseWrap: 'preserve', // 使用默认的折行标准htmlWhitespaceSensitivity: 'css' // 根据显示样式决定html要不要折行}
10.配置VSCode的插件
1. 安装ESLint插件
2. 安装Prettier ESLint插件
修改vscode的设置文件
// 配置vscode
// 打开：设置 -> 文本编辑器 -> 字体 -> 在 settings.json 中编辑// settings.json文件
{// vscode默认启用了根据文件类型自动设置tabsize的选项"editor.detectIndentation": false,// 重新设定tabsize"editor.tabSize": 2,// 每次保存的时候自动格式化 "editor.formatOnSave": true,// 每次保存的时候将代码按eslint格式进行修复"eslint.autoFixOnSave": true,// 添加vue支持"eslint.validate": ["javascript","javascriptreact",{"language": "vue","autoFix": true}],// #让prettier使用eslint的代码格式进行校验 "prettier.eslintIntegration": true
}
11.附篇
- 有时候我们在写一些其他的项目时也会用到eslint,就比如使用vscode环境来开发uniapp,小程序等项目。这时候由于我们配置了eslint规则，项uni,wx等这些全局对象就会被识别为未定义的变量，我们可以在eslint的配置文件中找到globals选项，在里面添加这些全局对象，即可解决这个问题。
globals: {uni: 'readonly',wx: 'readonly'}