项目开发工具【六款】

前言

六款插件让你项目更加的规范✨✨✨

• EditorConfig：为不同编辑器上处理同一项目的多个开发人员维护一致的编码风格
• Prettier：一款强大的代码格式化工具，是当下前端最流行的代码格式化工具
• ESLint：查找潜在的问题或不规范的编码风格，维护一致的代码风格和可读性
• Git Husky：提交代码前执行脚本程序，检测语法是否符号规范
• Commitizen：帮助你优雅的写出一个符号规范的git commit 命令
• Commitlint：保证开发人员使用同一种git commit 命令规范

一.集成editorconfig配置

说明：

EditorConfig 有助于为不同 IDE 编辑器上处理同一项目的多个开发人员维护一致的编码风格，不会与其他一般性格式化工具，如 prettier、eslint和 tslint 冲突，而是更像是它们之间的补充，本身并不会自动调整代码格式，而是根据指定的配置规则来检测其中有任何不一致的地方，并提供相应的建议/警告

使用步骤：

1. VSCode需要安装一个插件：EditorConfig for VS Code
   

2. 创建并配置.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

二.使用prettier工具

说明：

Prettier 是一款强大的代码格式化工具，支持 JavaScript、TypeScript、CSS、SCSS、Less、JSX、Angular、Vue、GraphQL、JSON、Markdown 等语言，基本上前端能用到的文件格式它都可以搞定，是当下最流行的代码格式化工具

使用步骤：

1.VSCode需要安装prettier的插件

2.VSCod中的配置

设置 Prettier-Code formatter为默认的格式化文档

步骤：选择任意一个文件，鼠标右键，选择 使用....格式化文档，选择配置默认格式化程序...，选择Prettier-Code formatter

PS：到这里已经可以格式化文件来规范代码了，不过如何在项目中配置自己的代码规范呢，请接着往下走

3.在项目中安装prettier

npm install prettier -D

4.配置.prettierrc文件：

• useTabs：使用tab缩进还是空格缩进，选择false；
• tabWidth：tab是空格的情况下，是几个空格，选择2个；
• printWidth：当行字符的长度，推荐80，也有人喜欢100或者120；
• singleQuote：使用单引号还是双引号，选择true，使用单引号；
• trailingComma：在多行输入的尾逗号是否添加，设置为 none，比如对象类型的最后一个属性后面是否加一个，；
• semi：语句末尾是否要加分号，默认值true，选择false表示不加；

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

5.创建.prettierignore忽略文件

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

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

/public/*

6.格式化文档是否生效

三.使用ESLint检测

描述：

是一个针对 javascript 代码的静态分析工具，其主要作用是帮助开发者发现和修复代码中的问题。它可以根据事先定义好的规则来检查代码中潜在的问题，并给出相应的建议或警告

使用步骤：

1.手动项目配置需要的ESLint环境（初始化项目时选择ESLint，则无需执行这一步）

//全局安装 ESLint
npm install -g eslint    
//初始化 ESLint
eslint --init 
//安装针对react项目的 ESLint 插件 
npm install eslint-plugin-react --save-dev       //针对react项目
//npm install eslint-plugin-vue --save-dev         针对vue项目

2.VSCode需要安装ESLint插件：

3.解决eslint和prettier冲突的问题：

PS：两者都配置代码规范的，不一致就会导致出错

3.1安装插件：

npm install eslint-plugin-prettier 

3.2添加prettier插件：

  extends: [
    "plugin:vue/vue3-essential",
    "eslint:recommended",
    "@vue/typescript/recommended",
    "@vue/prettier",
    "@vue/prettier/@typescript-eslint",
     //在eslint中引入prettier规范
    'plugin:prettier/recommended'
  ],

3.3格式化文档测试是否成功

四.使用git Husky工具

描述：

保证代码仓库中的代码都是符号eslint规范的，在执行git commit命令的时候对其进行校验，如果不符合eslint规范，则自动通过修改

使用步骤：

1. 使用自动配置命令：

npx husky-init '&&' npm install

2. 打开.husky文件夹下的pre-commit文件，进行配置命令
   

3. 执行git commit的时候会自动对代码进行lint校验，相当于提交代码之前执行了lint脚本命令
   

五.规范git commit命令

描述：

通常我们的git commit会按照统一的风格来提交，这样可以快速定位每次提交的内容，方便之后对版本进行控制。

但是如果每次手动来编写这些是比较麻烦的事情，我们可以使用一个工具：Commitizen帮助我们编写规范

使用步骤：

1.安装Commitizen

npm install commitizen -D

2.安装cz-conventional-changelog，并且初始化cz-conventional-changelog：

npx commitizen init cz-conventional-changelog --save-dev --save-exact

这个时候我们提交代码需要使用 npx cz替代git commit -m ""，便会依次出现如下六个选项

• 第一步是选择type，本次更新的类型
  

• 第二步选择本次修改的范围（作用域）
  

• 第三步选择提交的信息
  

• 第四步提交详细的描述信息
  

• 第五步是否是一次重大的更改
  

• 第六步是否影响某个open issue
  

• 执行效果
  
  type表格
  

六.限制 git commit提交

描述：

如果我们按照第五条使用npx cz来规范了提交风格，但是依然人通过 git commit 按照不规范的格式提交应该怎么办呢？

通过commitlint来限制提交 git commit

使用步骤：

1. 安装依赖包

npm i @commitlint/config-conventional @commitlint/cli -D

2. 在根目录创建commitlint.config.js文件，配置commitlint

module.exports = {
  extends: ['@commitlint/config-conventional']
}

3. 使用husky生成commit-msg文件，验证提交信息：

npx husky add .husky/commit-msg "npx --no-install commitlint --edit $1"

这样，当别人使用 git commit 提交时就会报错，只能使用npx cz进行提交

结语

感谢读者阅读并关注博客文章，并对文章中提到的观点、建议或批评表示感谢