📑 airbnb 集成总结

共有三个部分:

• airbnb 包括 5 个部分: (airbnb, import, react, hooks, a11y): 通过 eslint --init 或者 install-peerdeps eslint-config-airbnb --dev 安装。extends设置了airbnb，就不需要 plugin:react/recommended等了，因为已经包括进去了。
• prettier (plugin, config)，需要单独安装配置(3 个地方，加.pretterrc)
• node (plugin, config) ，需要单独安装配置: extends 设置node/recommended

📑 eslint,prettier + create-react-app setup

1. create-react-app: downgrade eslint version: ^7.77.0 -> ^6.6.0

2. (deprecated, 不需要了) babel-eslint: create-react-app toolchain uses Babel which transpiles new JavaScript features into older versions to run in older browsers. However, the ESLint parser isn’t up to date with ongoing JavaScript changes, so we need to use the babel-eslint parser. In .eslintrc.json, add:

   $ yarn add -D babel-eslint

   "parser": "babel-eslint"

3. To run the linter, run the ESLint package script on a file or every .js and .jsx file in the src directory.

   $ npx eslint src/**/*.{js,jsx}
   $ npx eslint src/**/*.{js,jsx} --fix

🪕 tools

• Bit
• eslint, prettier, airbnb
• husky, lint-staged, .huskyrc在git pre-commit的钩子调起 lint-staged, lint-staged 取得所有被提交的文件依次执行写好的任务
• lerna, mocha, chai, sinon
• storybook, Styleguidist. With Storybook you write stories in JavaScript files. With Styleguidist you write examples in Markdown files.
• concurrently, nodemon, babel
• cross-env, dotenv
• pm2, nodemon

📑 airbnb

• eslint --init uses install-peerdeps eslint-config-airbnb --dev

• peerDependencies:

  • eslint-config-airbnb
  • eslint-plugin-react-hooks: enforces the Rules of Hooks.
  • eslint-plugin-react: React specific linting rules for ESLint
  • eslint
  • eslint-plugin-jsx-a11y: Static AST checker for accessibility rules on JSX elements.
  • eslint-plugin-import: This plugin intends to support linting of ES2015+ (ES6+) import/export syntax
• Add “extends”: “airbnb” to your .eslintrc

• airbnb 缺省情况下把上述的设置都包括进去了。所以不需要一个个配置，只要 extends airbnb 就可以了。

  airbnb = [
  	"eslint:recommended",
  	"plugin:react/recommended",
  	"plugin:react-hooks/recommended",
  	"plugin:import",
  	"plugin:jsx-a11y/recommended",
  ];

• 不需要添加 rules 了，因为都包括进去了。VSCode - ESLint, Prettier & Airbnb Setup

📑 airbnb-base

• install-peerdeps --dev eslint-config-airbnb

• peerDependencies:

  • eslint-config-airbnb-base@14.2.1
  • eslint-plugin-import@2.22.1
  • eslint@7.2.0
• Add “extends”: “airbnb-base” to your .eslintrc.

📑 prettier

• install

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

• eslintrc.json(3 个地方需要配置)

  "extends": ["plugin:prettier/recommended"]
  "plugins": ["prettier"],
  "rules": {
    "prettier/prettier": "error"
  }

📑 node

• intall

  $ npm install --save-dev eslint-config-node eslint-plugin-node

• eslintrc.json

  "extends": [
      "eslint:recommended",
      "plugin:node/recommended"
  ]

  🪕 Reference

📑 1. Install ESLint & Prettier extensions for VSCode

Optional - Set format on save and any global prettier options

📑 2. Install Packages

$ npm i -D prettier eslint-plugin-prettier eslint-config-prettier eslint-plugin-node eslint-config-node

$ npx install-peerdeps --dev eslint-config-airbnb

📑 3. Create .prettierrc for any prettier rules (semicolons, quotes, etc)

📑 4. Create .eslintrc.json file (You can generate with eslint —init if you install eslint globally)

{
	"extends": ["airbnb", "prettier", "plugin:node/recommended"],
	"plugins": ["prettier"],
	"rules": {
		"prettier/prettier": "error",
		"no-unused-vars": "warn",
		"no-console": "off",
		"func-names": "off",
		"no-process-exit": "off",
		"object-shorthand": "off",
		"class-methods-use-this": "off"
	}
}

🪕 Notice

• ESLint Rules - https://eslint.org/docs/rules/
• Prettier Options - https://prettier.io/docs/en/options.html
• Airbnb Style Guide - https://github.com/airbnb/javascript
• A plugin is an npm package that usually exports rules. The plugins property value can omit the eslint-plugin- prefix of the package name.

🪕 Q/A

• Warning: React version was set to “detect” in eslint-plugin-react settings, but the “react” package is not installed. Assuming latest React version for linting.

  Fix: add the following into .eslintrc.json

  "settings": {
    "react": {
      "version": "latest"
    }
  }