@luozhu/eslint-config-react

Install

yarn add -D eslint prettier @luozhu/eslint-config-react @luozhu/prettier-config lint-staged yorkie

自动配置

yarn create @luozhu/create-coding-style
# 类型选择 react

手动配置

.eslintrc.js

vscode extension: dbaeumer.vscode-eslint

module.exports = {
  root: true,
  extends: ['@luozhu/eslint-config-react'],
};

.prettierrc.js

module.exports = require('@luozhu/prettier-config');

.editorconfig

vscode extension: editorconfig.editorconfig

# EditorConfig is awesome: http://EditorConfig.org

# top-most EditorConfig file
root = true

# Unix-style newlines with a newline ending every file
[*]
quote_type = single # Fix Prettier "prettier.singleQuote" not working in 1.40 vs code
indent_style = space
indent_size = 2
end_of_line = lf
charset = utf-8
trim_trailing_whitespace = true
insert_final_newline = true

[*.md]
trim_trailing_whitespace = false

[Makefile]
indent_style = tab

pre-commit lint

package.json

{
  "gitHooks": {
    "pre-commit": "lint-staged"
  },
  "lint-staged": {
    "**/*.{js,jsx,ts,tsx}": ["eslint --fix"],
    "**/*.{md,json}": ["prettier --write"]
  }
}

.vscode/settings.json

{
  "editor.formatOnSave": false,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
}

Problem

ESLint plugins used by this config must also be installed within your project. This is a limitation within ESLint.

Related Links:

• Support having plugins as dependencies in shareable config
• rfcs
• progress

Temporary Solutions:

• Fix eslint shareable config using rushstack/eslint-patch

Updating babel-eslint to @babel/eslint-parser for React apps

Related Links:

• https://tjaddison.com/blog/2021/03/updating-babel-eslint-to-babeleslint-parser-for-react-apps/