Eslint

TIP

Find and fix problems in your JavaScript code - ESLint - Pluggable JavaScript Linter

安装依赖,需要存在package.json文件,所以必须是npm管理的项目

npm init @eslint/config

在执行上面的命令后会自动生成一个.eslintrc.{js,yml,json}文件。我们就可以在里面配置规则了。js后缀，有一个问题，需要我们在env中指定node,不然会报错module is not defined

module.exports = {
  env: {
    browser: true,
    es2021: true,
    node: true,
  },
  extends: 'eslint:recommended',  // 继承使用eslint默认的推荐规则
  overrides: [],
  parserOptions: {
    ecmaVersion: 'latest',
    sourceType: 'module',
  },
  rules: {},
}

vscode-eslint插件

ESLint - Visual Studio Marketplace安装该插件的好处是，不用我们手动执行命令行来进行检查，而是直接在vscode中显示了。

需要在项目中安装eslint依赖

Prettier

TIP

代码格式化

Prettier · Opinionated Code Formatter

vscode Prettier插件

Prettier - Code formatter - Visual Studio Marketplace。使用插件的好处是不用我们，手动去执行命令行，如prettier --write来格式化代码。该插件的快捷键CMD + Shift + P -> Format Document来格式化代码。但是通常的开发方式是，保存文件时就格式化代码。我们可以打开，默认是关闭的。

该插件使用推荐的方式是在我们开发项目的时候，建议在项目中安装prettier。如果项目中没有安装prettier模块，那么将使用该插件绑定的prettier。

npm install --save-dev --save-exact prettier
npm install prettier -D --save-exact

安装该插件后，默认为我们配置美化的设置,根据下图打开vscode默认的设置

在文件defaultSettings.json中可以看到该插件为我们默认配置了美化的设置。

// 使用单引号而不是双引号
"prettier.singleQuote": false,
// 在所有代码语句的末尾添加分号
"prettier.semi": true,

但是不同的开发者可能会更改，prettier建议在项目中创建两个文件

• Use .prettierignore to ignore (i.e. not reformat) certain files and folders completely.

  # 要忽略的文件夹
  build
  coverage
  
  # 忽略的文件
  *.html
  

• .prettierrc.json配置自己的设置，这样可以覆盖默认的设置

  {
    "singleQuote": true, 
    "semi": false
  }
  

eslint-config-prettier

use Prettier for formatting and linters for catching bugs

eslint通常包括两种风格：校验代码的规则和格式美化的规则，当使用prettier时，eslint的格式美化规则不是必须的，甚至多余，还能会影响到prettier.

来自Integrating with Linters · Prettier

所以出现了eslint-config-prettier Turns off all rules that are unnecessary or might conflict with Prettier.

参考配置

vite维护了社区模板，可以参考vitejs/awesome-vite: ⚡️ A curated list of awesome things related to Vite.js (github.com)

如prettierrc的配置

module.exports = {
  semi: false,  // 在所有代码语句的末尾不添加分号
  arrowParens: 'avoid', // 箭头函数仅有一个参数时，参数不添加括号
  singleQuote: true,  // 使用单引号而不是双引号
  tabWidth: 2,	// 指定一个制表符等于的空格数
  endOfLine: 'auto', // 指定文件的结尾换行符
}

JavaScript Style Guide

Everyone writes JavaScript a little differently. We finally decided it was time that we got together and agree on how we write JavaScript.

来自airbnb/javascript: JavaScript Style Guide (github.com)

我们可以使用eslint来配置，来统一这种风格

实战

根据下面的文档依次安装配置

• eslint-plugin-prettier eslint校验prettier的风格，如果没有prettier的风格则eslint报错。
• eslint-config-airbnb-base 校验airbng风格,如果没有airbng javascript的风格则eslint报错（内置了eslint的规则）
• eslint-config-prettier : Turns off all rules that are unnecessary or might conflict with Prettier

效果

module.exports = {
  env: {
    browser: true,
    es2021: true,
    node: true,
  },
  extends: ['airbnb-base', 'prettier'],
  overrides: [],
  parserOptions: {
    ecmaVersion: 'latest',
    sourceType: 'module',
  },
  plugins: ['prettier'],
  rules: {
    'prettier/prettier': 'error',
    'arrow-body-style': 'off',
    'prefer-arrow-callback': 'off',
  },
};

{
  "singleQuote": true, 
  "semi": true,
  "endOfLine":"lf"
}

"devDependencies": {
    "eslint": "^8.24.0",
    "eslint-config-airbnb-base": "^15.0.0",
    "eslint-config-prettier": "^8.5.0",
    "eslint-plugin-import": "^2.26.0",
    "eslint-plugin-prettier": "^4.2.1",
    "prettier": "2.7.1"
}

typescript Eslint

TypeScript ESLint (typescript-eslint.io)Tooling which enables ESLint to support TypeScript

typescript-eslint enables ESLint to run on TypeScript code. It brings in the best of both tools to help you write the best JavaScript or TypeScript code you possibly can.

将上面的配置进行改造

Configurations | TypeScript ESLint (typescript-eslint.io)