Vue项目eslint配置
要求
ESLint v6.2.0 及以上
Node.js v12.22.x、v14.17.x、v16.x 及以上
- 在项目中安装
eslint
eslint-plugin-vue
# npm npm install --save-dev eslint eslint-plugin-vue # yarn yarn add -D eslint eslint-plugin-vue
- 配置 .eslintrc.* 文件配置规则 (以
.eslintrc.js
为例 )module.exports = { extends: [ /* vue 2 配置 */ "plugin:vue/recommended", "plugin:vue/essential", "plugin:vue/strongly-recommended", /* vue 3 配置 */ // "plugin:vue/vue3-recommended" // "plugin:vue/vue3-essential" // "plugin:vue/vue3-strongly-recommended" ], rules: { 'vue/no-unused-vars': 'error' } }
- 与编辑器集成 (vs code)
- 安装 dbaeumer.vscode-eslint 微软官方提供的扩展。
- 在项目根目录创建
.vscode
文件夹,并添加settings.json
文件如下图
settings.json
文件添加如下配置
代码如下:{ "editor.formatOnSave": true, "eslint.validate": [ "javascript", "javascriptreact", "vue" ], "vetur.validation.template": false }
- 协调 Prettier 冲突
- 安装 eslint-config-prettier
# npm npm install --save-dev eslint-config-prettier # yarn yarn add --dev eslint-config-prettier
- 在
.eslintrc.js
文件中添加如下图配置
vue 项目eslint配置完成
- 安装 eslint-config-prettier
react 项目配置eslint
初始化:npx create-react-app app-ts --template typescript
基础eslint配置
我们以使用cra初始化的项目为例(见下图)
- 执行如下命令行
npm install eslint --save-dev
然后再执行
npx eslint --init
会进入问答模式,下图选项仅供参考2. 你想如何使用 ESLint?
To check syntax and find problems
3. 您的项目使用什么类型的模块?
JavaScript modules (import/export)
- 你的代码在哪里运行?
Browser
- 您希望您的配置文件采用什么格式? 放在单独的
JavaScript
文件里
- 选择
Yes
完成后会增加一个eslintrc.js
文件
我们发现上图文件eslintrc.js
文件中第一行有报错,我们在添加一个.eslintignore
文件来修复这个问题,把.eslintrc.js
添加到忽略文件即可
这里需要注意⚠️ 不要把module.exports
改成export default
会导致配置文件失效。。。
进阶eslint配置
打开vscode设置,按照下图选择
根目录下会增加一个.vscode
文件夹,作用是仅在当前项目下配置有效
在vscode 扩展里安装eslint 插件
使用默认设置就可以,关闭eslint格式化功能(默认是关闭的)
配置 prettier
- 项目安装 pretter
npm install --save-dev --save-exact prettier
- 创建 pretter 配置文件
echo {}> .prettierrc.json
{ "useTabs": true, "arrowParens": "avoid", "printWidth": 120, "tabWidth": 2, "semi": true, "singleQuote": true, "bracketSpacing": true, "endOfLine": "auto", "trailingComma": "none" }
- vscode 安装 pretter (点击跳转)
pretter-vscode - 安装
eslint-config-prettier
解决 pretter 与 eslint 冲突问题
npm install --save-dev eslint-config-prettier
5. 设置默认使用 prettier 格式化程序
react 项目配置 完成了