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 problems在这里插入图片描述3. 您的项目使用什么类型的模块?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 项目配置 完成了

Logo

基于 Vue 的企业级 UI 组件库和中后台系统解决方案,为数万开发者服务。

更多推荐