react项目使用ESLint和prettier

react项目使用eslint

npm install eslint --save-dev
1
2

初始化配置文件

# 初始化eslintrc文件
npx eslint --init
1
2

√ How would you like to use ESLint? · style       
√ What type of modules does your project use? · esm
√ Which framework does your project use? · react
√ Does your project use TypeScript? · No / Yes
√ Where does your code run? · browser, node
√ How would you like to define a style for your project? · guide
√ Which style guide do you want to follow? · airbnb      
√ What format do you want your config file to be in? · JavaScript
Checking peerDependencies of eslint-config-airbnb@latest
The config that you've selected requires the following dependencies:

eslint-plugin-react@^7.28.0 eslint-config-airbnb@latest eslint@^7.32.0 || ^8.2.0 eslint-plugin-import@^2.25.3 eslint-plugin-jsx-a11y@^6.5.1 eslint-plugin-react-hooks@^4.3.0
√ Would you like to install them now? · No / Yes
√ Which package manager do you want to use? · npm
Installing eslint-plugin-react@^7.28.0, eslint-config-airbnb@latest, eslint@^7.32.0 || ^8.2.0, eslint-plugin-import@^2.25.3, eslint-plugin-jsx-a11y@^6.5.1, eslint-plugin-react-hooks@^4.3.0


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

一些问题

• Missing an explicit type attribute for button

详见：https://github.com/jsx-eslint/eslint-plugin-react/blob/HEAD/docs/rules/button-has-type.md

//给button添加type属性
 go('/home')}>Home button>
 go('/looking')}>Looking button>
 go('/about')}>abloutbutton>
1
2
3
4

• Unexpected use of file extension “jsx” for "./pages/Looking/index.jsx"eslintimport/extensions
  详细见：https://github.com/import-js/eslint-plugin-import/blob/v2.26.0/docs/rules/extensions.md

在eslint配置文件中进行配置

  rules: {
    'import/extensions': ['error', 'always', { ignorePackage: false }],
  },
1
2
3

遇到问题可以查看相关插件的使用规则

    "eslint": "^8.28.0",
    "eslint-config-airbnb": "^19.0.4",
    "eslint-plugin-import": "^2.26.0",
    "eslint-plugin-jsx-a11y": "^6.6.1",
    "eslint-plugin-react": "^7.31.11",
    "eslint-plugin-react-hooks": "^4.6.0",
1
2
3
4
5
6

react项目使用prettier

详细见文档：https://prettier.io/docs/en/install.html

安装依赖

npm install --save-dev --save-exact prettier
1

新建文件.prettierignore

忽略这里的文件，不进行preitter校验

# Ignore artifacts:
node_modules
build
dist


# Ignore all HTML files:
*.html

# Ignore all MD files:
*.md
1
2
3
4
5
6
7
8
9
10
11

新建文件.prettierrc.js or .prettierrc.json

配置prettier规则

//.prettierrc.js
module.exports = {
  singleQuote: true,
};

1
2
3
4
5

//.prettierrc.json
{
  "singleQuote": true,
}
1
2
3
4

检查文件

npx prettier --write .

npx prettier --check .
1
2
3