【拓展】903- 一套非常标准的前端代码工作流

喜欢ヅ旅行 2022-11-11 14:45 119阅读 0赞

![ac7cf04a477a0c141bd3bedeadde4e9b.png][]

作者：geekape

https://juejin.cn/post/6921223155621036039

工欲善其事，必先利其器。对于写代码而言，也是需要有一套完善的工作流（工具和流程）。

先说下**编辑器选择**，在踏入前端行业之前，我最喜欢的代码编辑器就是 `sublime text` ,它很简单，编写大部分语言都很ok，就比如说写 `python` ，下面是我在2017年我在学习 `python` 时发布过一篇关于 `sublime text` 的百度经验：![1b0b69d24505bffc5b6e0e0cd090f615.png][]

但是我现在几乎不再使用它，取而代之的是 VSCode，一款微软开源的代码编辑器，它自带 `git` ， `eslint` 等工具，让我们编码更加的有质量，有效率。

接下来是**代码规范**方面，刚写代码的前几年，我毫不关心代码质量，遵循“能用就行”的原则，随着项目的迭代，代码越来越臃肿（好在我之前项目都不需要迭代），我仿佛听到有人骂骂咧咧的在吐槽我代码????，就像我吐槽别人代码一样。现在我们完全可以使用 `eslint` ， `prettier` ， `editorConfig` 来规范我们的代码，对于团队而言，这个至关重要。

再聊聊 **git工作流** ，现在管理代码几乎都是使用 `git` 版本管理工具，了解它是必要的，像一些基本的推拉合，解决冲突这些我们就不聊了，主要聊下团队协作方面使用 git 的工具及使用方法。

下面我将主要围绕上面三个点来推荐一些工具和使用方法。

## ESLint ##

ESLint 是一款插件化的 JavaScript 代码静态检查工具，其核心是通过对代码解析得到的 AST（Abstract Syntax Tree，抽象语法树）进行模式匹配，来分析代码达到检查代码质量和风格问题的能力。

### 安装 ###

安装并初始化 eslint：

`// 全局安装 npm install -g eslint // cd到项目根目录下 // 强制初始化package.json npm init -force // 初始化ESLint eslint --init`

### 使用方式 ###

#### 写注释 ####

下面这行注释表示在当前文件中禁用 `console` 关键字

`/* eslint no-console: "error" */`

#### 写文件 ####

ESLint支持 `eslint.js` ， `eslintrc.yaml` ， `eslintrc.json` 类型的配置文件。

如 eslint.js 配置文件：

`module.exports = { env: { // 环境 browser: true, es2021: true, }, extends: [ // 拓展 'eslint:recommended', 'plugin:@typescript-eslint/recommended', ], parser: '@typescript-eslint/parser', // 解析器，本解析器支持Ts parserOptions: { // 解析器配置选项 ecmaVersion: 12, // 指定es版本 sourceType: 'module', // 代码支持es6，使用module }, plugins: [ // 插件 '@typescript-eslint', ], rules: { // 规则 }, };`

### 配置项 ###

*  parser - 解析器
 *  parserOptions - 解析器选项
 *  env 和 globals - 环境和全局变量
 *  rules - 规则
 *   *  off或0，关闭规则
     *  warn或1，开启规则
     *  error或2，开启规则，并会出错阻止代码运行
 *  plugins - 插件
 *  extends - 拓展

### 配置优先级 ###

**规则是使用离要检测的文件最近的 .eslintrc文件作为最高优先级。**

1.  行内配置
2.  命令行选项
3.  项目级配置
4.  IDE环境配置

## Prettier ##

`Prettier` 是一个代码格式化的工具。

### 安装使用 ###

`npm install --save-dev --save-exact prettier // 格式化所有文件，npx命令是使用当前项目下的prettier npx prettier --write .`

### 配置文件 ###

`Prettier` 支持 .prettierrc 为名称，以 `.yaml` `.yml` `.json` `.js` 为后缀的的配置文件，当然你也可以使用 `package.json` 文件中的 `Prettier` 属性来配置。

`module.exports = { printWidth: 80, //一行的字符数，如果超过会进行换行，默认为80 tabWidth: 2, //一个tab代表几个空格数，默认为80 useTabs: false, //是否使用tab进行缩进，默认为false，表示用空格进行缩减 singleQuote: false, //字符串是否使用单引号，默认为false，使用双引号 semi: true, //行位是否使用分号，默认为true trailingComma: 'none', //是否使用尾逗号，有三个可选值" }`

## EditorConfig ##

EditorConfig有助于维护跨多个编辑器和IDE从事同一项目的多个开发人员的一致编码风格，团队必备神器。

**.editorconfig文件**

`# EditorConfig is awesome: https://EditorConfig.org # top-most EditorConfig file 表示是最顶层的配置文件，发现设为true时，才会停止查找.editorconfig文件 root = true # Unix-style newlines with a newline ending every file 对于所有的文件 始终在文件末尾插入一个新行 [*] end_of_line = lf insert_final_newline = true # Matches multiple files with brace expansion notation # Set default charset 对于所有的js,py文件，设置文件字符集为utf-8 [*.{js,py}] charset = utf-8 # 4 space indentation 控制py文件类型的缩进大小 [*.py] indent_style = space indent_size = 4 # Tab indentation (no size specified) 设置某中文件的缩进风格为tab Makefile未指明 [Makefile] indent_style = tab # Indentation override for all JS under lib directory 设置在lib目录下所有JS的缩进为 [lib/**.js] indent_style = space indent_size = 2 # Matches the exact files either package.json or .travis.yml 设置确切文件 package.json/.travis/.yml的缩进类型 [{package.json,.travis.yml}] indent_style = space indent_size = 2`

### 通配符 ###

`* 匹配除/之外的任意字符串 ** 匹配任意字符串 ? 匹配任意单个字符 [name] 匹配name中的任意一个单一字符 [!name] 匹配不存在name中的任意一个单一字符 {s1,s2,s3} 匹配给定的字符串中的任意一个(用逗号分隔) {num1..num2} 匹配num1到num2之间的任意一个整数, 这里的num1和num2可以为正整数也可以为负整数`

### 属性 ###

`indent_style 设置缩进风格(tab是硬缩进，space为软缩进) indent_size 用一个整数定义的列数来设置缩进的宽度，如果indent_style为tab，则此属性默认为tab_width tab_width 用一个整数来设置tab缩进的列数。默认是indent_size end_of_line 设置换行符，值为lf、cr和crlf charset 设置编码，值为latin1、utf-8、utf-8-bom、utf-16be和utf-16le，不建议使用utf-8-bom trim_trailing_whitespace 设为true表示会去除换行行首的任意空白字符。 insert_final_newline 设为true表示使文件以一个空白行结尾 root 表示是最顶层的配置文件，发现设为true时，才会停止查找.editorconfig文件`

## VSCode集成 ##

我使用的是 `VSCode` ，来给它添加魔法，加 `EditorConfig` ， `Eslint` ，`Prettier` ， `Git` 扩展。

下面是 `Prettier` 的扩展，我以下安装好了，大家在扩展中自行搜索安装就好了。![711c04e8e32eca3874aa1cbb1fdfc726.png][]

配置全局工作区 `setting.json` 文件，在文件中加入下面配置：

`// 设置全部语言在保存时自动格式化 "editor.formatOnSave": ture, // 设置特定语言在保存时自动格式化 "[javascript]": { "editor.formatOnSave": true }`

**prettier配置**

`{ // 设置全部语言的默认格式化程序为prettier "editor.defaultFormatter": "esbenp.prettier-vscode", // 设置特定语言的默认格式化程序为prettier "[javascript]": { "editor.defaultFormatter": "esbenp.prettier-vscode" } }`

**ESLint配置**

`{ // 保存时自动修复 "editor.codeActionsOnSave": { // For ESLint "source.fixAll.eslint": true, } }`

## husky/lint-staged ##

在提交 git 之前，我们需要**校验我们的代码是否符合规范**，如果不符合，则不允许提交代码。

首先，安装依赖：

`npm install -D husky // lint-staged 可以让husky只检验git工作区的文件，不会导致你一下出现成百上千个错误 npm install -D lint-staged`

然后修改 `package.json`，增加配置：

`"scripts": { "precommit": "eslint src/**/*.js" } "husky": { "hooks": { "pre-commit": "lint-staged" } }, "lint-staged": { "src/**/*.{js,vue}": ["prettier --write", "eslint --cache --fix", "git add"] }`

在 `git commit` 之前会进入 工作区文件的扫描，执行 `prettier` 脚本，修改 `eslint` 问题，然后重要提交到工作区。

## Commitizen ##

一个格式化commit message的工具，为什么需要这个工具，下面是 `angular.js` 开源项目的commit message，很清楚明了是不是，几乎所有大项目和大公司都在使用这种 `commit` 规范。![1044e65e351f1864e3e36fcc22ad3afe.png][]**好处：**

*  提供更多的历史信息，方便快速浏览
 *  可以过滤某些`commit`，便于筛选代码`review`
 *  可以追踪`commit`生成更新日志
 *  可以关联**issues**

### 安装 ###

`npm install -g commitizen`

安装符合AngularJS规范的**提交说明，初始化cz-conventional-changelog**适配器：

`commitizen init cz-conventional-changelog --save --save-exact`

然后使用 `git cz` 命令 代替 `git comit` 来提交git说明：![c0f2aa2274a239ffc539b1aa9439edc7.png][]

### 定制化项目提交说明 ###

上面的提交说明都是英文的，如果想自定义，可以试试**cz-customizable**，先安装：

`npm install cz-customizable --save-dev`

修改package.json文件：

`"config": { "commitizen": { "path": "node_modules/cz-customizable" } }`

在项目根目录下创建 `.cz.config.js` 文件：

`'use strict'; module.exports = { types: [ {value: '特性', name: '特性: 一个新的特性'}, {value: '修复', name: '修复: 修复一个Bug'}, {value: '文档', name: '文档: 变更的只有文档'}, {value: '格式', name: '格式: 空格, 分号等格式修复'}, {value: '重构', name: '重构: 代码重构，注意和特性、修复区分开'}, {value: '性能', name: '性能: 提升性能'}, {value: '测试', name: '测试: 添加一个测试'}, {value: '工具', name: '工具: 开发工具变动(构建、脚手架工具等)'}, {value: '回滚', name: '回滚: 代码回退'} ], scopes: [ {name: '模块1'}, {name: '模块2'}, {name: '模块3'}, {name: '模块4'} ], // it needs to match the value for field type. Eg.: 'fix' /* scopeOverrides: { fix: [ {name: 'merge'}, {name: 'style'}, {name: 'e2eTest'}, {name: 'unitTest'} ] }, */ // override the messages, defaults are as follows messages: { type: '选择一种你的提交类型:', scope: '选择一个scope (可选):', // used if allowCustomScopes is true customScope: 'Denote the SCOPE of this change:', subject: '短说明:\n', body: '长说明，使用"|"换行(可选)：\n', breaking: '非兼容性说明 (可选):\n', footer: '关联关闭的issue，例如：#31, #34(可选):\n', confirmCommit: '确定提交说明?' }, allowCustomScopes: true, allowBreakingChanges: ['特性', '修复'], // limit subject length subjectLimit: 100 };`

然后运行， `git cz` ：![3d26bf4353d7505796fe904383120464.png][]

### Commitizen校验 ###

检验提交的说明是否符合规范，不符合则不可以提交

`npm install --save-dev @commitlint/cli // 安装符合Angular风格的校验规则 npm install --save-dev @commitlint/config-conventional`

在根目录下创建 `commitlint.config.js` 并配置检验：

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

然后在 `package.json` 中配置 husky ，之前我们已经安装过了，直接添加配置：

`"husky": { "hooks": { "commit-msg": "commitlint -E HUSKY_GIT_PARAMS" } }`

### 给commit加表情 ###

如这样子的，是不是更加生动形象了，有意思了。![cec9c39087dfc4a98a9de307e0748e57.png][]安装：

`npm i -g gitmoji-cli`

使用：你可以在这个 gitmoji 网站找到更多的表情来丰富你的提交记录，只需要在提交记录中加上类型 `:bug:` 的代码就可以显示表情了。

![b899ece38c571a8a29d2e858aa4e89f9.png][]

## 参考资料 ##

*  https://juejin.cn/post/6909788084666105864
 *  https://cloud.tencent.com/developer/article/1546185
 *  https://www.jianshu.com/p/d264f88d13a4
 *  https://juejin.cn/post/6844903831893966856

![7f80e78fe0cf3a5eb2f5b07118576506.gif][]

[1. JavaScript 重温系列（22篇全）][1. JavaScript _22]

[2. ECMAScript 重温系列（10篇全）][2. ECMAScript _10]

[3. JavaScript设计模式 重温系列（9篇全）][3. JavaScript_ _9]

4. [正则 / 框架 / 算法等 重温系列（16篇全）][_ _ _ _ _16]

5. [Webpack4 入门（上）][Webpack4]|| [Webpack4 入门（下）][Webpack4 1]

6. [MobX 入门（上）][MobX] || [MobX 入门（下）][MobX 1]

7. 100[\+篇原创系列汇总][Link 1]

![c45728b06dd27753dbc1ebe63bd28f3a.gif][]

回复“**加群**”与大佬们一起交流学习~

点击“**阅读原文**”查看 100+ 篇原创文章

[ac7cf04a477a0c141bd3bedeadde4e9b.png]: /images/20221022/77835d2554ad4245a7950f24cf0b0af8.png
[1b0b69d24505bffc5b6e0e0cd090f615.png]: /images/20221022/a6696c2061ae48f6a525ec30b8ab9042.png
[711c04e8e32eca3874aa1cbb1fdfc726.png]: https://img-blog.csdnimg.cn/img_convert/711c04e8e32eca3874aa1cbb1fdfc726.png
[1044e65e351f1864e3e36fcc22ad3afe.png]: https://img-blog.csdnimg.cn/img_convert/1044e65e351f1864e3e36fcc22ad3afe.png
[c0f2aa2274a239ffc539b1aa9439edc7.png]: https://img-blog.csdnimg.cn/img_convert/c0f2aa2274a239ffc539b1aa9439edc7.png
[3d26bf4353d7505796fe904383120464.png]: https://img-blog.csdnimg.cn/img_convert/3d26bf4353d7505796fe904383120464.png
[cec9c39087dfc4a98a9de307e0748e57.png]: https://img-blog.csdnimg.cn/img_convert/cec9c39087dfc4a98a9de307e0748e57.png
[b899ece38c571a8a29d2e858aa4e89f9.png]: https://img-blog.csdnimg.cn/img_convert/b899ece38c571a8a29d2e858aa4e89f9.png
[7f80e78fe0cf3a5eb2f5b07118576506.gif]: https://img-blog.csdnimg.cn/img_convert/7f80e78fe0cf3a5eb2f5b07118576506.gif
[1. JavaScript _22]: http://mp.weixin.qq.com/s?__biz=MjM5MDc4MzgxNA%3D%3D&chksm=b1c224ea86b5adfc10c3aa1841be3879b9360d671e98cc73391c2490246f1348857b9821d32c&idx=1&mid=2458453187&scene=21&sn=a69b4d7d991867a07a933f86e66b9f55#wechat_redirect
[2. ECMAScript _10]: http://mp.weixin.qq.com/s?__biz=MjM5MDc4MzgxNA%3D%3D&chksm=b1c224e086b5adf6dad41a0d36b77a9bfb4bc9f0d29a816266b3e28c892e54274967dbce380b&idx=1&mid=2458453193&scene=21&sn=e5392cb77bc17c9e94b6c826b5f52a83#wechat_redirect
[3. JavaScript_ _9]: http://mp.weixin.qq.com/s?__biz=MjM5MDc4MzgxNA%3D%3D&chksm=b1c224e386b5adf554ab928cdeaf7ee16dbb2d895be17f2a12a59054a75b913470ca7649bbc7&idx=1&mid=2458453194&scene=21&sn=e7f0734b04484bee5e10a85a7cbb85c1#wechat_redirect
[_ _ _ _ _16]: http://mp.weixin.qq.com/s?__biz=MjM5MDc4MzgxNA%3D%3D&chksm=b1c224e286b5adf432850f82db18cc8647d639836798cf16b478d9a6f7c81df87c6da5257684&idx=1&mid=2458453195&scene=21&sn=1e0c8b7ea8ddc207b523ec0a636a5254#wechat_redirect
[Webpack4]: http://mp.weixin.qq.com/s?__biz=MjM5MDc4MzgxNA%3D%3D&chksm=b1c2251f86b5ac09dbbbb7c8e1d80c6cbd793a523cdfa690f8734def57812e616b9906aeec79&idx=1&mid=2458453302&scene=21&sn=904e40a421024ea0d394e9850b674012#wechat_redirect
[Webpack4 1]: http://mp.weixin.qq.com/s?__biz=MjM5MDc4MzgxNA%3D%3D&chksm=b1c2251e86b5ac08464872cd880811423e0d1bbcebbe11dcac9d99fa38c5332c089c06d65d95&idx=1&mid=2458453303&scene=21&sn=422f2b5e22c3b0e91a8353ee7e53fed9#wechat_redirect
[MobX]: http://mp.weixin.qq.com/s?__biz=MjM5MDc4MzgxNA%3D%3D&chksm=b1c2264c86b5af5aa7300a04d55efead6223e310d68e10222cd3577a25c783d3429f00767960&idx=1&mid=2458453605&scene=21&sn=0a506769d5eeb7953f676e93fb4d18eb#wechat_redirect
[MobX 1]: http://mp.weixin.qq.com/s?__biz=MjM5MDc4MzgxNA%3D%3D&chksm=b1c2264086b5af5611524eedb0d409afe86d859dce6ceff1c17ddab49d353c385e45611a73fa&idx=1&mid=2458453609&scene=21&sn=f0c22e82f2537204d9b173161bae6b82#wechat_redirect
[Link 1]: http://mp.weixin.qq.com/s?__biz=MjM5MDc4MzgxNA%3D%3D&chksm=b1c224dd86b5adcbd98189315e60de6a0106993690b69927cc1c1f19fd8f591fefce4e3db51f&idx=2&mid=2458453236&scene=21&sn=daf00392f960c115463c5aaf980620b4#wechat_redirect
[c45728b06dd27753dbc1ebe63bd28f3a.gif]: https://img-blog.csdnimg.cn/img_convert/c45728b06dd27753dbc1ebe63bd28f3a.gif