一套标准的前端代码工作流

2021-03-29 11:11:19  浏览:916  作者:前端网

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

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

640.webp (1).jpg

但是我现在几乎不再使用它,取而代之的是 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: {
                // 环境
                browsertrue,
                es2021true,
        },
        extends: [
                // 拓展
                'eslint:recommended',
                'plugin:@typescript-eslint/recommended',
        ],
        parser'@typescript-eslint/parser'// 解析器,本解析器支持Ts
        parserOptions: {
                // 解析器配置选项
                ecmaVersion12// 指定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 = {
        printWidth80//一行的字符数,如果超过会进行换行,默认为80
        tabWidth2//一个tab代表几个空格数,默认为80
        useTabsfalse//是否使用tab进行缩进,默认为false,表示用空格进行缩减
        singleQuotefalse//字符串是否使用单引号,默认为false,使用双引号
        semitrue//行位是否使用分号,默认为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 的扩展,我以下安装好了,大家在扩展中自行搜索安装就好了。

640.webp.jpg

配置全局工作区 setting.json 文件,在文件中加入下面配置:

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

prettier配置

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

<p style="margin-top: 0px; margin-bottom: 20px; padding: 0px; max-width: 100%; clear: both; min-height: 1em; font-family: Optima-Regular, Optima, PingFangSC-light, PingFangTC-light, "PingFang SC", Cambria, Cochin, Georgia, Times, "Times New Roman", serif; white-space: normal; background-color: rgb(255, 255, 255); line-height: 1.8em; color: rgb(5

评论区

共0条评论
  • 这篇文章还没有收到评论,赶紧来抢沙发吧~

【随机新闻】