JavaScript项目配置：详解ESLint、Prettier与Vue/TypeScript集成-优快云博客

本文链接：https://blog.youkuaiyun.com/XiugongHao/article/details/135841723

概述

一个代码规范检查的插件。不同公司有不同的规范，所以并没有一个所谓的标准。

自己学习一般去查看所用框架的官方文档，一般都会推荐适合于框架本身的一套规范。

举例说明：

// 这里是 eslintrc.js 遵循 cjs 规范导出 eslint 配置对象
module.exports = {
    // 表示当前目录为 根目录
    root: true,
    // 表示启动 eslint 的环境
    env: {
        // 在 node 环境下开启 eslint
        node: true
    },
    // 继承规则
    extends: [
        // 在此处添加更多通用规则集，例如：
        // 'eslint:recommended',
        'plugin:vue/vue3-recommended',
        // 'plugin:vue/recommended' // 如果您使用的是 Vue.js 2.x，请使用此选项。
    ],
    // 解析器
    parserOptions: {
        parser: 'babel-eslint'
    },
    // 规则以及启用的错误级别
    /**
     * 错误级别：
     * 0 = off (禁用)
     * 1 = warn (警告 不会导致程序退出)
     * 2 = error (错误 会导致程序退出)
     */
    rules: {
        // 在此处覆盖/添加规则设置，例如：
        // 'vue/no-unused-vars': 'error'
    }
}

一般来说，只有 eslint 是不够的，我们还需要使用 prettier 在eslint 检查出问题的时候，自动将代码转为满足我们规范的格式。

当我们使用 vscode 时，可以直接安装插件 prettier，然后配置 .prettierrc.json 文件，作文 prettier 的默认配置文件。

{
  // 尾随分号
  "semi": false,
  "tabWidth": 2,
  "singleQuote": true,
  "printWidth": 100,
  // 多行 js 是否在最后一个行添加逗号
  "trailingComma": "none"
}

然后在设置中：

在这里插入图片描述

配合保存自动执行格式化。

还有一个问题是 vscode 中可以多个格式化插件会有冲突，所以我们可以右键指定以各种形式格式化我们的文件。
还有vscode 默认缩进为4个，eslint 默认缩进为 2个tab，需要在设置里面的的 tab-size 设置为 2.。
有时 eslint 和 prettier 之间会有一些冲突，我们可以直接在 eslint 中配置关闭该规则的检验即可（规则名字默认和报错名字一致）。

“plugin:vue/vue3-essential” 和 plugin:vue/vue3-recommended 的区别：plugin:vue/vue3-essential" 和 plugin:vue/vue3-recommended 的区别。简单来说就是由于 essential 是 recommended 的子集，因此使用 recommended 规则意味着不需要使用 essential 规则。

VSCode中eslint的配置:

{
	"eslint.lintTask.enable": true,
	"eslint.alwaysShowStatus": true,
	//这行配置决定了 ESLint 应该检查哪些文件类型的代码。在这个例子中，ESLint 将检查 JavaScript、
	JavaScript React（也就是 JSX）、TypeScript 以及 TypeScript React（也就是 TSX）文件
	"eslint.validate": [
	"javascript",
	"javascriptreact",
	"typescript",
	"typescriptreact"
	],
	//这行配置决定了当你保存文件时，VS Code 会尝试自动修复所有 ESLint 可以修复的问题。这样，你就不
	需要手动运行 ESLint 的修复命令了。
	"editor.codeActionsOnSave": {
	"source.fixAll.eslint": true
},

示例 - 硅谷甄选

eslint中文官网: http://eslint.cn/

插件化的javascript代码检测工具

首先安装eslint（同时之前也安装了prettier）

pnpm i eslint -D

生成配置文件:.eslint.cjs

npx eslint --init

.eslint.cjs配置文件

module.exports = {
   // 1. 运行环境
    "env": { 
        "browser": true,//浏览器端
        "es2021": true,//es2021
    },
    // 2. 规则继承
    "extends": [ 
       //全部规则默认是关闭的,这个配置项开启推荐规则,推荐规则参照文档，比如:函数不能重名、对象不能出现重复key
        "eslint:recommended",
        //vue3语法规则
        "plugin:vue/vue3-essential",
        //ts语法规则
        "plugin:@typescript-eslint/recommended"
    ],
    // 3. 要为特定类型的文件指定处理器
    "overrides": [
    ],
    // 4. 指定解析器:解析器
    //Esprima 默认解析器
    //Babel-ESLint babel解析器
    //@typescript-eslint/parser ts解析器
    "parser": "@typescript-eslint/parser",
    // 5. 指定解析器选项
    "parserOptions": {
        "ecmaVersion": "latest",//校验ECMA最新版本
        "sourceType": "module"//设置为"script"（默认），或者"module"代码在ECMAScript模块中
    },
    // 6. ESLint支持使用第三方插件。在使用插件之前，您必须使用npm安装它
    //该eslint-plugin-前缀可以从插件名称被省略
    "plugins": [
        "vue",
        "@typescript-eslint"
    ],
    // 7. eslint规则
    "rules": {
    }
}

1.1vue3环境代码校验插件

# 让所有与prettier规则存在冲突的Eslint rules失效，并使用prettier进行代码检查
"eslint-config-prettier": "^8.6.0",
"eslint-plugin-import": "^2.27.5",
"eslint-plugin-node": "^11.1.0",
# 运行更漂亮的Eslint，使prettier规则优先级更高，Eslint优先级低
"eslint-plugin-prettier": "^4.2.1",
# vue.js的Eslint插件（查找vue语法错误，发现错误指令，查找违规风格指南
"eslint-plugin-vue": "^9.9.0",
# 该解析器允许使用Eslint校验所有babel code
"@babel/eslint-parser": "^7.19.1",

安装指令

pnpm install -D eslint-plugin-import eslint-plugin-vue eslint-plugin-node eslint-plugin-prettier eslint-config-prettier eslint-plugin-node @babel/eslint-parser

1.2修改.eslintrc.cjs配置文件

// @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', // 对模板中的自定义组件强制执行属性命名样式
  },
}

当然还有一些规则：

extends: [
	// 启用插件 'vue' 并使用其 'vue3-essential' 配置，这个配置包含了一些 Vue.js 3 的基本规则。
	"plugin:vue/vue3-essential",
	// 使用 ESLint 官方推荐的一些规则
	"eslint:recommended",
	// 启用 '@vue/eslint-config-typescript' 配置，这个配置包含了一些针对 TypeScript 的推荐规则。
	"@vue/typescript/recommended",
	// 启用 '@vue/eslint-config-prettier' 配置，这个配置关闭所有和 Prettier 冲突的规则，让 ESLint 和
	Prettier 能够更好地协同工作。
	"@vue/prettier",
	// 启用 '@vue/eslint-config-prettier/@typescript-eslint' 配置，这个配置关闭所有和 Prettier 以及
	TypeScript 冲突的规则，让 ESLint、Prettier 和 TypeScript 能够更好地协同工作。
	"@vue/prettier/@typescript-eslint",
	// 启用 'prettier' 插件的 'recommended' 配置，这个配置包含了一些 Prettier 推荐的规则，并且把
	Prettier 本身设置为 ESLint 的一个规则，这样 ESLint 就会在检查代码的时候同时运行 Prettier(运
	行.prettierric.json文件里的规则)。
	'plugin:prettier/recommended'
],

1.3.eslintignore忽略文件

dist
node_modules

1.4运行脚本

package.json新增两个运行脚本

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

示例 - 大事件

前置准备

安装vscode自带的可安装插件 ESlint，并用npm在自己的项目中安装ESlint，配置保存时自动修复

在这里插入图片描述

打开设置，找到 settings.json，进行配置。

在这里插入图片描述

禁用 vscode 本身自带的可安装插件 Prettier，用npm在自己的项目中安装Prettier，并关闭保存自动格式化（format on save）

// ESlint插件 + Vscode配置 实现自动格式化修复
"editor.codeActionsOnSave": {
    "source.fixAll": true
},
// 关闭保存时自动格式化 
// 防止vscode自动格式化的工具与 eslint 插件冲突
"editor.formatOnSave": false,

配置文件 .eslintrc.cjs

prettier 风格配置 https://prettier.io
1. 单引号
2. 不使用分号
3. 每行宽度至多80字符
4. 不加对象|数组最后逗号
5. 换行符号不限制（win mac 不一致）
vue组件名称多单词组成（忽略index.vue）
props解构（关闭）

在这里插入图片描述

在这个文件（创建项目会自动生成这个文件）里面新增一个配置项 rules：

  rules: {
    'prettier/prettier': [
      'warn',
      {
        singleQuote: true, // 单引号
        semi: false, // 无分号
        printWidth: 80, // 每行宽度至多80字符
        trailingComma: 'none', // 不加对象|数组最后逗号
        endOfLine: 'auto' // 换行符号不限制（win mac 不一致）
      }
    ],
    'vue/multi-word-component-names': [
      'warn',
      {
        ignores: ['index'] // vue组件名称多单词组成（忽略index.vue）
      }
    ],
    'vue/no-setup-props-destructure': ['off'], // 关闭 props 解构的校验（props解构 丢失响应式）
    // 💡 添加未定义变量错误提示，create-vue@3.6.3 关闭。
    'no-undef': 'error'
  }

然后我们保存后，就可发现代码已经可以自动格式化。

使用继承

Airbnb 公司开源一套自己的规则，可以直接使用他们的规则。

不需要安装 eslint，直接安装下面的包，会直接安装对应版本的 eslint。

npm i -D eslint-config-airbnb

然后配置：

module.exports = {
	extends: 'airbnb'
}

示例 - 仿问卷星

eslint prettier

eslint 编码规范，如变量未定义（语法语义）
prettier 编码风格，如末尾是否用 ;
eslint 也有编码风格的功能，两者可能会有冲突

eslint

安装插件

npm install eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin -save-dev

初始化配置文件 .eslint.js

npx eslint --init    ## 然后根据引导一步一步走

解释：eslint plugin 与 extend 的区别：

extend 提供的是 eslint 现有规则的一系列预设
plugin 则提供了除预设之外的自定义规则，当你在 eslint 的规则里找不到合适的的时候就可以借用插件来实现了

安装 vscode 插件 eslint ，此时就可以看到代码 App.txs 中的错误提示（如定义一个未使用的变量）

在 package.json 中增加 scripts "lint": " eslint 'src/**/*.+(js|ts|jsx|tsx)' "

控制台运行 npm run lint 也可以看到错误提示。如果要自动修复，可以加 --fix 参数

prettier

npm install prettier eslint-config-prettier eslint-plugin-prettier -save-dev

eslint-config-prettier 禁用所有和 Prettier 产生冲突的规则
eslint-plugin-prettier 把 Prettier 应用到 Eslint，配合 rules "prettier/prettier": "error" 实现 Eslint 提醒。

在 eslint 配置文件的 extends 最后增加 'plugin:prettier/recommended'

安装 vscode 插件 prettier ，此时可以看到代码 App.txs 中的格式提示（如末尾是否使用 ; ，或单引号、双引号）

在 package.json 中增加 scripts "format": " prettier --write 'src/**/*.+(js|ts|jsx|tsx)' "

控制台运行 npm run format 可以修复所有的格式错误

设置 vscode .vscode/settings.json 自动保存格式，可以在文件保存时，自动保留格式

{
    "editor.codeActionsOnSave": {
        "source.fixAll.eslint": true
    }
}

增加配置文件 .prettierrc.js 规定自己的编码格式，运行 npm run format 可以看到效果，保存文件也可以看到效果。

【注意】如果此处没效果，可以重启 vscode 再重试。

一直搞不定，重启 vscode 就好了。
在 vscode 搜“prettier” 插件时，发现一个 “reload required” 的提示，于是就重启了

CRA 创建的项目，配置文件是 js 格式
vite 创建的项目，配置文件是 cjs 格式