Vue项目eslint配置

要求
ESLint v6.2.0 及以上
Node.js v12.22.x、v14.17.x、v16.x 及以上

1. 在项目中安装 eslint eslint-plugin-vue

   # npm 
   npm install --save-dev eslint eslint-plugin-vue
   # yarn
   yarn add -D eslint eslint-plugin-vue
   

2. 配置 .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'
     }
   }
   

3. 与编辑器集成 （vs code）
   • 安装 dbaeumer.vscode-eslint 微软官方提供的扩展。
   • 在项目根目录创建 .vscode 文件夹，并添加 settings.json 文件如下图
     
   • settings.json 文件添加如下配置
     代码如下：

     {
     	"editor.formatOnSave": true,
     	"eslint.validate": [
     		"javascript",
     		"javascriptreact",
     		"vue"
     	],
     	"vetur.validation.template": false
     }
     

4. 协调 Prettier 冲突
   • 安装 eslint-config-prettier

     # npm
     npm install --save-dev eslint-config-prettier
     # yarn
     yarn add --dev eslint-config-prettier
     

   • 在 .eslintrc.js 文件中添加如下图配置
     
     vue 项目eslint配置完成

react 项目配置eslint

初始化：npx create-react-app app-ts --template typescript

基础eslint配置

我们以使用cra初始化的项目为例（见下图）

1. 执行如下命令行
   npm install eslint --save-dev
   然后再执行
   npx eslint --init
   会进入问答模式，下图选项仅供参考2. 你想如何使用 ESLint？To check syntax and find problems3. 您的项目使用什么类型的模块？JavaScript modules (import/export)
2. 你的代码在哪里运行？ Browser
   
3. 您希望您的配置文件采用什么格式？ 放在单独的 JavaScript 文件里
   
4. 选择Yes
   
   完成后会增加一个eslintrc.js文件
   
   我们发现上图文件 eslintrc.js 文件中第一行有报错，我们在添加一个 .eslintignore 文件来修复这个问题，把.eslintrc.js 添加到忽略文件即可
   
   这里需要注意⚠️ 不要把module.exports 改成 export default 会导致配置文件失效。。。
   

进阶eslint配置

打开vscode设置，按照下图选择

根目录下会增加一个.vscode 文件夹,作用是仅在当前项目下配置有效

在vscode 扩展里安装eslint 插件

使用默认设置就可以，关闭eslint格式化功能（默认是关闭的）

配置 prettier

1. 项目安装 pretter
   npm install --save-dev --save-exact prettier
2. 创建 pretter 配置文件
   echo {}> .prettierrc.json

   {
   	"useTabs": true,
   	"arrowParens": "avoid",
   	"printWidth": 120,
   	"tabWidth": 2,
   	"semi": true,
   	"singleQuote": true,
   	"bracketSpacing": true,
   	"endOfLine": "auto",
   	"trailingComma": "none"
   }
   

3. vscode 安装 pretter (点击跳转)
   pretter-vscode
4. 安装 eslint-config-prettier 解决 pretter 与 eslint 冲突问题
   npm install --save-dev eslint-config-prettier
   5. 设置默认使用 prettier 格式化程序
   

react 项目配置 完成了