前端项目搭建部署全流程（三）：项目代码规范

1.前言

继上一篇文章基本已经搭建完一个简单的React项目的，这边文章主要是讲项目的代码规范

2.使用eslint规范代码

2.1.安装依赖

yarn add eslint @types/eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin --dev

eslint eslint核心代码

@types/eslinteslint的类型定义

@typescript-eslint/parsereslint解析器，用于解析typescript，从而检查和规范Typescript代码

@typescript-eslint/eslint-plugineslint插件，包含了各类定义好的检测Typescript代码的规范

2.2.eslint配置

在工程目录下新建.eslintrc.js文件，包含eslint的配置

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

module.exports = {
	parser: '@typescript-eslint/parser', // 定义ESLint的解析器
	extends: ['plugin:react/recommended', 'plugin:@typescript-eslint/recommended'], // 定义文件继承的子规范
	plugins: ['@typescript-eslint'], // 定义该eslint文件所依赖的插件
	env: {
		// 指定代码的运行环境
		browser: true,
		node: true,
	}
};

2.3.eslint React配置

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

module.exports = {
	...
	settings: {
		//自动发现React的版本，从而进行规范react代码
		react: {
			pragma: 'React',
			version: 'detect',
		},
	},
	parserOptions: {
		//指定ESLint可以解析JSX语法
		ecmaVersion: 2019,
		sourceType: 'module',
		ecmaFeatures: {
			jsx: true,
		},
	},
};

3.结合Prettier与Eslint格式化代码

3.1.安装依赖

yarn add prettier eslint-config-prettier eslint-plugin-prettier --dev

prettier插件的核心代码

eslint-config-prettier解决ESLint中的样式规范和prettier中样式规范的冲突，以prettier的样式规范为准，使ESLint中的样式规范自动失效

eslint-plugin-prettier将prettier作为ESLint规范来使用

3.2.Prettier配置

在工程目录下新建.prettierrc文件

{
  "useTabs": true,
  "eslintIntegration": true,
	"stylelintIntegration": true,
	"tabWidth": 2,
	"singleQuote": true,
	"semi": true,
	"printWidth": 150
}

修改.eslintrc.js文件，增加配置

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

module.exports = {
	parser: '@typescript-eslint/parser', // 定义ESLint的解析器
	extends: [
	'plugin:react/recommended', 
	'plugin:@typescript-eslint/recommended', 
	'prettier/@typescript-eslint', 
	'plugin:prettier/recommended'], // 定义文件继承的子规范
	....
};

prettier/@typescript-eslint使得@typescript-eslint中的样式规范失效，遵循prettier中的样式规范

plugin:prettier/recommended使用prettier中的样式规范，且如果使得ESLint会检测prettier的格式问题，同样将格式问题以error的形式抛出

4.vscode中集成eslint配置

4.1.配置setting.json

先安装eslint的插件，然后修改setting.json文件，我配置在当前工作区，没有配到全局的用户配置

{
	"eslint.codeAction.showDocumentation": {
		"eslint.enable": true, //是否开启vscode的eslint
		"eslint.autoFixOnSave": true, //是否在保存的时候自动fix eslint
		"eslint.options": {
			//指定vscode的eslint所处理的文件的后缀
			"extensions": [".js", ".vue", ".ts", ".tsx"]
		},
		"eslint.validate": [
			//确定校验准则
			"javascript",
			"javascriptreact",
			{
				"language": "html",
				"autoFix": true
			},
			{
				"language": "vue",
				"autoFix": true
			},
			{
				"language": "typescript",
				"autoFix": true
			},
			{
				"language": "typescriptreact",
				"autoFix": true
			}
		]
	}
}

5.参考资料

查阅还有一些约束手段可以管控代码提交等，个人不太喜欢这种强制管控的方式，所有没有写入进来，查看链接

juejin.cn/post/684490…