1. Introduction

Following the last article, we have basically built a simple React project. This article focuses on the code specification of the project

2. Use esLint specification code

2.1. Install dependencies

yarn add eslint @types/eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin --dev
Copy the code

Eslint EsLint core code

Type definitions for @types/ eslintesLint

@typescript-eslint/ parseresLint parser that parses typescript to check and standardize typescript code

The @typescript-eslint/ eslint-pluginesLint plugin, which contains various specifications for checking typescript code

2.2. Eslint configuration

Create a.eslintrc.js file in the project directory that contains the esLint configuration

/ * * *@type {import('eslint').Linter.BaseConfig}* /

module.exports = {
	parser: '@typescript-eslint/parser'.// Define a parser for ESLint
	extends: ['plugin:react/recommended'.'plugin:@typescript-eslint/recommended'].// Define a subspecification for file inheritance
	plugins: ['@typescript-eslint'].// Define the plugins that the ESLint file depends on
	env: {
		// Specify the environment in which the code is run
		browser: true.node: true,}};Copy the code

2.3. Eslint React configuration

/ * * *@type {import('eslint').Linter.BaseConfig}* /

module.exports = {
	...
	settings: {
		// Automatically discover the React version to regulate the React code
		react: {
			pragma: 'React'.version: 'detect',}},parserOptions: {
		// Specifies that ESLint can parse JSX syntax
		ecmaVersion: 2019.sourceType: 'module'.ecmaFeatures: {
			jsx: true,}}};Copy the code

3. Format code by combining Prettier with Eslint

3.1. Install dependencies

yarn add prettier eslint-config-prettier eslint-plugin-prettier --dev
Copy the code

The core code for the prettier plug-in

Eslint-config-prettier Resolves the conflict between the style specification in ESLint and the style specification in Prettier, where the style specification in ESLint becomes invalid

Eslint-plugin-prettier The use of prettier as the ESLint specification

3.2. Prettier configuration

Example Create the. Prettierrc file in the project directory

{
  "useTabs": true."eslintIntegration": true."stylelintIntegration": true."tabWidth": 2."singleQuote": true."semi": true."printWidth": 150
}
Copy the code

Modify the. Eslintrc.js file and add the configuration

/ * * *@type {import('eslint').Linter.BaseConfig}* /

module.exports = {
	parser: '@typescript-eslint/parser'.// Define a parser for ESLint
	extends: [
	'plugin:react/recommended'.'plugin:@typescript-eslint/recommended'.'prettier/@typescript-eslint'.'plugin:prettier/recommended'].// Define a subspecification for file inheritance. };Copy the code

Prettier / @typescript-esLint Invalidates the style specification in @typescript-esLint to follow the style specification in prettier

Plugin: prettier/use it prettier style from the specification, and if make ESLint will detect prettier the format of the questions, the same will be thrown in the form of the error format problem

4. Eslint configuration is integrated with vscode

4.1. The configuration setting. Json

Json file. I configured it in the current workspace. There is no global user configuration

{
	"eslint.codeAction.showDocumentation": {
		"eslint.enable": true.// Whether to enable VScode eslint
		"eslint.autoFixOnSave": true.// Whether to fix eslint automatically when saving
		"eslint.options": {
			// specifies the suffix for files handled by vscode's eslint
			"extensions": [".js".".vue".".ts".".tsx"]},"eslint.validate": [
			// Determine the verification criteria
			"javascript"."javascriptreact",
			{
				"language": "html"."autoFix": true
			},
			{
				"language": "vue"."autoFix": true
			},
			{
				"language": "typescript"."autoFix": true
			},
			{
				"language": "typescriptreact"."autoFix": true}}}]Copy the code

5. Reference materials

Check there are some constraints that can control code submission, etc. Personally, I don’t like this kind of mandatory control, so it is not written in, check the link

Juejin. Cn/post / 684490…