Eslint配置指南

ESLint最初是由Nicholas C. Zakas 于2013年6月创建的开源项目。ESLint 是一个开源的 JavaScript 代码检查工具，它是用来进行代码的校验，检测代码中潜在的问题，比如某个变量定义了未使用、函数定义的参数重复、变量名没有按规范命名等等。

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

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

规则

ESLint 附带有大量的规则，修改规则应遵循如下要求：

'off' 或 0 - 关闭规则
'warn' 或 1 - 开启规则，使用警告级别的错误：warn (不会导致程序退出)
'error' 或 2 - 开启规则，使用错误级别的错误：error (当被触发的时候，程序会退出)

打开VS Code 安装相对于的插件

一、安装ESLint 

1、安装eslint  

npm install eslint -D

yarn add eslint -D

pnpm install eslint -D

2、生成配置文件：.eslint.cjs

npx eslint --init

按要求运行完成后项目中会多出一个 .eslint.cjs 文件，跟src是同级关系，然后就可以根据 规则 自己按照项目来配置规则

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

这里配置了一小部分，想要完整的配置并且是根据自己习惯来配置的话 规则 这里有完整了

4、.eslintignore忽略文件

然后在同级目录下安装一个创建一个 .eslintignore忽略文件 ，目的是让 eslint 忽略某些文件中的配置，创建好后写入：

dist
node_modules

 5、运行脚本

package.json新增两个运行脚本

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

二、配置prettier

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

而prettier属于格式化工具，它看不惯格式不统一，所以它就把eslint没干好的事接着干，另外，prettier支持

包含js在内的多种语言。

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

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

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、.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"
}

3、.prettierignore忽略文件

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

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

三、保存自动格式化

想要按 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"]
}