ssts-hospital-web-master项目实战记录三：项目开发规范

标签：web 文件 Prettier ssts hospital eslint ESLint 代码 prettier

记录时间：2024-10-23

参考书籍《Vue.js 3+TypeScript完全指南》17.3 项目开发规范

　　在企业项目开发中，通常由多人一起协作完成开发任务，每个人编写的代码风格可能不统一。为了避免出现问题，一般会制定一些规范来约束整个项目的编码风格，包括编辑器规范、代码格式规范、编写代码规范、Git提交规范、命名规范等。这些规范可以帮助团队保持一致的代码风格，提高代码的可读性和可维护性。

1.统一IDE编码格式

使用不同的IDE编辑器编写代码时，由于各编辑器的默认配置不同，可能会导致同一项目的代码风格不一致。为了解决这个问题，可以使用EditorConfig工具来统一项目的代码格式，具体的使用步骤如下。

（1）在项目的根目录下新建.editorconfig文件，代码如下所示：

# http://editorconfig.org

root = true

[*] # 表示所有文件适用
charset = utf-8 # 设置文件字符集为 utf-8
indent_style = space # 缩进风格（tab | space）
indent_size = 2 # 缩进大小
end_of_line = lf # 控制换行类型(lf | cr | crlf)
trim_trailing_whitespace = true # 去除行首的任意空白字符
insert_final_newline = true # 始终在文件末尾插入一个新行

[*.md] # 表示仅 md 文件适用以下规则
max_line_length = off
trim_trailing_whitespace = false

（2）VS Code 需要安装一个插件：EditConfig for VS Code。

（3）在任意文件中添加后，查看是否始终在文件末尾插入新行，如果是，则代表统一了 IDE 编码风格。

2.Prettier格式化代码

　　Prettier是一款强大的代码格式化工具，支持大部分前端开发中用到的文件格式，包括JavaScript、TypeScript、CSS、Scss、Less、JSX、JSON、Angular、Vue.js和React等。

　　Prettier能够自动识别代码的格式，并将其转换为一致的风格。目前，Prettier是前端领域最受欢迎的代码格式工具之一。以下是在项目中集成Prettier工具的步骤。

　　第一步：安装Prettier。

npm install prettier @2.7.1 -D #本书安装的版本是2.7.1

npm install prettier @lastest -D #安装最新版本

注：当前最新版本

"prettier": "^3.3.3",

　　第二步，配置.prettierrc文件。

　　在项目的根目录下新建.prettierrc文件，代码如下所示：

{
"useTabs": false,
"tabWidth": 2,
"printWidth": 120,
"singleQuote": true,
"trailingComma": "none",
"semi": false
}

　　该配置文件中各个选项的作用如下。

　　● useTabs：是否使用Tab缩进，选择false表示使用空格缩进。

　　● tabWidth：当使用空格缩进时，一个Tab占几个空格，选择2。

　　● printWidth：一行字符的最大长度，推荐设置为80，也有人习惯设置为100或者120。

　　● singleQuote：使用单引号还是双引号，选择true，表示使用单引号。

　　● trailingComma：是否添加多行输入的尾逗号。

　　● semi：语句末尾是否加分号，默认为true，表示添加。

　　第三步：创建.prettierignore文件

　　在项目根目录下新建.prettierignore文件，用于指定哪些文件无需用Prettier进行格式化，代码如下所示：

/dist/*
.local
.output.js
/node_modules/**

**/*.svg
**/*.sh

/public/*

　　第四步：VS Code需要安装Prettier Code formatter插件。　　第五步：验证Prettier是否生效。　　（1）保存代码，观察JavaScript中的双引号是否会被转成单引号。如果会，则代表配置成功；如果不会，那么可以在setting.json文件（%APPDATA%\Code\User\settings.json）中增加如下配置： "editor.formatOnSave": true "editor.defaultFormatter": "esbenp.prettier-vscode", "[javascript]": { "editor.defaultFormatter": "esbenp.prettier-vscode" } "[typescript]": { "editor.defaultFormatter": "esbenp.prettier-vscode" } 　　（2）配置一次性格式化所有代码的命令。 "scripts": { "prettier": "prettier --write ." } 　　执行“npm run prettier”命令，查看是否会格式化所有的代码，如果会，则代表配置成功。 3.ESLint检测代码

　　ESLint 是一款 JavaScript 代码检査工具，可以帮助开发者避免编写低质量代码，制定适合自己团队的规范，并能检测代码中的潜在错误和不安全的写法。

　　以下是在项目中集成 ESLint 工具的步骤。在创建项目时选择 ESLint，这样 Vue CLI会默认配置好 ESLint 环境。
　　（1）配置 ESLint 环境。

# 安装 eslint

npm i eslint -D

# 利用 eslint 命令行工具生成基本配置

npx eslint --init

注：当前最新版本
"@typescript-eslint/eslint-plugin": "^7.0.2",
"@typescript-eslint/parser": "^7.0.2",
"eslint": "^8.56.0",
"eslint-plugin-vue": "^9.21.1",