Eslint配置指南

• 1. Eslint配置指南
  • 1.1. 安装 ESLint
  • 1.2. 生成配置文件
  • 1.3. 修改配置文件
  • 1.4. 创建 .eslintignore 文件
  • 1.5. 运行 ESLint
  • 1.6. 整合到编辑器/IDE
  • 1.7. 自动修复
• 2. 配置prettier
  • 2.1. 安装依赖包
  • 2.2. .prettierrc.json添加规则
  • 2.3. .prettierignore忽略文件
  • 2.4. 保存自动格式化
• 3. eslint-config-win
  • 3.1. 安装
  • 3.2. 依赖版本
  • 3.3. 用法
    • 3.3.1. Vue
  • 3.4. Vue3 新增规则
  • 3.5. 参考
  • 3.6. 开发维护
• 4. eslint配置举例

1. Eslint配置指南

ESLint 是一个强大的代码检查工具，用于识别 JavaScript 和其他支持的语言中的常见编程错误，并强制执行一致的编码风格。

ESLint最初是由Nicholas C. Zakas 于2013年6月创建的开源项目。

ESLint 是一个开源的 JavaScript 代码检查工具，它是用来进行代码的校验，检测代码中潜在的问题，比如某个变量定义了未使用、函数定义的参数重复、变量名没有按规范命名等等。

中文官网：https://zh-hans.eslint.org/

英文官网：https://eslint.org/

下面是一个基本的 ESLint 配置指南，帮助你开始使用它来提升代码质量。

1.1. 安装 ESLint

首先，你需要在项目中安装 ESLint。如果你的项目是一个 Node.js 应用，通常会将其作为开发依赖安装：

npm install eslint --save-dev
// 或者使用 yarn
yarn add eslint --dev

1.2. 生成配置文件

ESLint 支持多种格式的配置文件，包括 .eslintrc.js, .eslintrc.yaml, .eslintrc.yml, .eslintrc.json, 以及直接在 package.json 中的 "eslintConfig" 字段。你可以根据需要选择合适的格式。

要生成配置文件，可以运行：

npx eslint --init

这会引导你进行一系列问题的回答，根据你的回答自动生成配置。

例如，你可以选择你的环境（浏览器、Node.js等）、想要遵循的编码规范（如 Airbnb、Google、Standard等）以及是否要支持某些语言特性（比如 Vue.js 或 React）。

1.3. 修改配置文件

生成的 .eslintrc.* 文件包含了 ESLint 的基础配置。你可以手动编辑这个文件来调整规则，添加或移除规则，或改变规则的严格程度。配置文件通常看起来像这样：

// .eslintrc.js 示例
// @see https://eslint.bootcss.com/docs/rules/
 
module.exports = {
   
   
  env: {
   
   
    browser: true,
    es2021: true,
    node: true,
    jest: true,
  },
  /* 指定如何解析语法 */
  parser: 'vue-eslint-parser',
  /** 优先级低于 parse 的语法解析配置 */
  parserOptions: {
   
   
    ecmaVersion: 'latest',
    sourceType: 'module',
    parser: '@typescript-eslint/parser',
    jsxPragma: 'React',
    ecmaFeatures: {
   
   
      jsx: true,
    },
  },
  /* 继承已有的规则 */
  extends: [
    'eslint:recommended',
    'plugin:vue/vue3-essential',
    'plugin:@typescript-eslint/recommended',
    'plugin:prettier/recommended',
  ],
  plugins: ['vue', '@typescript-eslint'],
  /*
   * "off" 或 0    ==>  关闭规则
   * "warn" 或 1   ==>  打开的规则作为警告（不影响代码执行）
   * "error" 或 2  ==>  规则作为一个错误（代码不能执行，界面报错）
   */
  rules: {
   
   
    // eslint（https://eslint.bootcss.com/docs/rules/）
    'no-var': 'error', // 要求使用 let 或 const 而不是 var
    'no-multiple-empty-lines': ['warn', {
   
    max: 1 }], // 不允许多个空行
    'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
    'no-unexpected-multiline': 'error', // 禁止空余的多行
    'no-useless-escape': 'off', // 禁止不必要的转义字符
 
    // typeScript (https://typescript-eslint.io/rules)
    '@typescript-eslint/no-unused-vars': 'error', // 禁止定义未使用的变量
    '@typescript-eslint/prefer-ts-expect-error': 'error', // 禁止使用 @ts-ignore
    '@typescript-eslint/no-explicit-any': 'off', // 禁止使用 any 类型
    '@typescript-eslint/no-non-null-assertion': 'off',
    '@typescript-eslint/no-namespace': 'off', // 禁止使用自定义 TypeScript 模块和命名空间。
    '@typescript-eslint/semi': 'off',
 
    // eslint-plugin-vue (https://eslint.vuejs.org/rules/)
    'vue/multi-word-component-names': 'off', // 要求组件名称始终为 “-” 链接的单词
    'vue/script-setup-uses-vars': 'error', // 防止<script setup>使用的变量<template>被标记为未使用
    'vue/no-mutating-props': 'off', // 不允许组件 prop的改变
    'vue/attribute-hyphenation': 'off', // 对模板中的自定义组件强制执行属性命名样式
  },
}

1.4. 创建 .eslintignore 文件

你可以创建一个 .eslintignore 文件来指定 ESLint 应该忽略哪些文件或目录。这与 .gitignore 类似，每一行一个路径模式。

例如：

/node_modules/
/dist/
/build/

1.5. 运行 ESLint

安装并配置好后，可以在命令行中运行 ESLint 来检查你的代码：

npx eslint yourfile.js
// 或者检查整个项目
npx eslint .

1.6. 整合到编辑器/IDE

大多数现代代码编辑器（如 VSCode, WebStorm等）都支持 ESLint 插件，允许你在编写代码时实时看到 ESLint 的警告和错误，并提供快速修复选项。确保安装对应的插件并启用它。

1.7. 自动修复

ESLint 提供了一个自动修复功能，可以尝试修复一些简单的警告和错误：

npx eslint --fix yourfile.js
// 或者修复整个项目
npx eslint --fix .

package.json新增两个运行脚本

"scripts": {
   
   
    "lint": "eslint src",
    "fix": "eslint src --fix",
}

以上就是 ESLint 的基本配置指南。随着项目的进展，你可能需要根据团队的编码规范进一步定制配置。记得定期更新 ESLint 及其插件以获取最新的规则和支持。

更多详细内容，请微信搜索“前端爱好者“， 戳我 查看 。

2. 配置prettier

有了eslint，为什么还要有prettier？

eslint针对的是javascript，他是一个检测工具，包含js语法以及少部分格式问题，在eslint看来，语法对了就能保证代码正常运行，格式问题属于其次；

而prettier属于格式化工具，它看不惯格式不统一，所以它就把eslint没干好的事接着干，另外，prettier支持包含js在内的多种语言。

总结起来，eslint和prettier这俩兄弟一个保证js代码质量，一个保证代码美观。

来到VS Code安装其对应的插件。

2.1. 安装依赖包

npm install -D eslint-plugin-prettier prettier eslint-config-prettier 
yarn add -D eslint-plugin-prettier prettier eslint-config-prettier 
pnpm install -D eslint-plugin-prettier prettier eslint-config-prettier 

同样是在src同级目录下安装.prettierrc.json文件夹

2.2. .prettierrc.json添加规则

{
   
   
  "printWidth": 120, 
  "tabWidth": 2, 
  "useTabs": false, 
  "semi": false, 
  "singleQuote": true,
  "bracketSpacing": true,
  "trailingComma": "all", 
  "jsxSingleQuote": false, 
  "arrowParens": "avoid",
  "proseWrap": "preserve",
  "htmlWhitespaceSensitivity": "strict", 
  "endOfLine": "auto"
}

2.3. .prettierignore忽略文件

/dist/*
/html/*
.local
/node_modules/**
**/*.svg
**/*.sh
/public/*

通过pnpm run lint去检测语法，如果出现不规范格式,通过pnpm run fix 修改

2.4. 保存自动格式化

想要按 Ctrl+S 保证的自动按eslint规则格式化代码的话，找到 .vscode 文件，内部新建个 setting.json 文件夹

setting.json 写入代码

{
   
   
    
"editor.formatOnType": true,
"editor.formatOnSave": true,
"eslint.codeAction.showDocumentation": {
   
   
    "enable": true
},
"editor.codeActionsOnSave": {
   
   
    "source.fixAll.eslint": true
},
"eslint.validate": ["javascript", "javascriptreact", "html", "vue"]
}

3. eslint-config-win

此规则适用于 JavaScript/Vue 项目的 ESLint 配置规范。

目前已支持 Vue 3.0，需要指定 extends 配置vue3

https://gitee.com/braden/eslint-config-win?spm=5176.28575747.0.0.ff1f2adcn7ydP7

3.1. 安装

yarn add @winner-fed/eslint-config-win -D

3.2. 依赖版本

eslint ^7.32.0
@babel/eslint-parser ^7.15.8
vue-eslint-parser ^7.11.0
eslint-plugin-vue ^7.20.0

Tips：如果项目中没有安装此依赖包或者版本不一致，请安装或者升级。

3.3. 用法

• 在你的项目的根目录下创建一个 .eslintrc.js 文件，并将以下内容复制进去：

module.exports = {
   
   
    extends: [
        '@winner-fed/win',
    ],
    env: {
   
   
        // 你的环境变量（包含多个预定义的全局变量）
        //
        // browser: true,
        // node: true,
        // mocha: true,
        // jest: true,
        // jquery: true
    },
    globals: {
   
   
        // 你的全局变量（设置为 false 表示它不允许被重新赋值）
        //
        // myGlobal: false
    },
    rules: {
   
   
        // 自定义你的规则
    }
};

• 项目目录下的 package.json 添加检测指令，举个例子

{
 ...
 "scripts": {
+    "lint:es": "eslint \"src/**/*.{vue,js,jsx}\" --fix",
 }
 ...
}

3.3.1. Vue

npm install --save-dev eslint babel-eslint vue-eslint-parser eslint-plugin-vue @winner-fed/eslint-config-win

在你的项目的根目录下创建一个 .eslintrc.js 文件，并将以下内容复制进去：

module.exports = {
   
   
    extends: [
        '@winner-fed/win',
        // 这里是针对 vue2 的配置
        '@winner-fed/win/vue', 
        // 如果是 vue3 的项目工程，则推荐下面配置
        // '@winner-fed/win/vue3',
    ],
    env: {
   
   
        // 你的环境变量（包含多个预定义的全局变量）
        //
        // browser: true,
        // node: true,
        // mocha: true,
        // jest: true,