1. 为什么要有规范化标准
- 软件开发需要多人协同
- 不同开发者具有不同的编码习惯和喜好
- 不同的喜好增加项目维护成本
- 每个项目或者团队需要明确统一的标准
2. 哪里需要规范化标准
- 代码、文档、甚至是提交日志
- 开发过程中人为编写的成果物
- 代码标准化规范最为重要
3. 实施规范化的方法
- 编码前人为的标准约定
- 通过工具实现
Lint - 常见的规范化实现方式
-
ESLint工具使用 - 定制
ESLint校验规则 -
ESLint对TypeScript的支持 -
ESLint结合自动化工具或者Webpack - 基于
ESLint的衍生工具 -
StyleLint工具的使用
-
1. ESLint 介绍
- 最为主流的
JavaScript Lint工具 监测JS代码质量 -
ESLint很容易统一开发者的编码风格 -
ESLint可以帮助开发者提升编码能力
2. ESLint 安装
- 初始化项目
- 安装
ESLint模块为开发依赖 - 通过
CLI命令难安装结果npm install eslint -D
3. ESLint 快速上手
# 下列命令提示报错
npx eslint .\main.js
# 需要先创建 配置文件 .eslintrc.js
npx eslint --init
# 再执行
npx eslint .\main.js
# 1. 如果有语法问题，会直接提示语法问题，并终止
# 2. 如果是风格问题，则可以通过 npx eslint --fix 来修正
module.exports = {
env: { // 标记环境
browser: true, // 标记在浏览器环境
// es6: false
},
extends: [
'standard'
],
parserOptions: {
ecmaVersion: 6, // 设置 ECMAScript 的版本
// sourceType: 'module'
},
rules: { // 规则
'no-alert': "error"
},
globals: {
"jQuery": "readonly"
}
}
c6PNNV.png
4. ESLint 配置注释
- 将目标代码禁
ESLint的检测
// 其中 eslint-disable-line 表示这一行不检测
// 后面跟上具体名称表示只禁用某个规则
const str1 = "${name} is a coder" // eslint-disable-line no-template-curly-in-string
console.log(str1)
5. ESLint 结合自动化工具
- 集成之后，
ESLint一定会工作 - 与项目统一，管理更加方便
- 在
babel之前去处理
// 在之前 Gulp 的配置当中的 script任务下进行修改
const script = () => {
return src('src/assets/scripts/*.js', { base: 'src' })
.pipe(plugins.eslint())
.pipe(plugins.eslint.format())
.pipe(plugins.eslint.failAfterError())
.pipe(plugins.babel({ presets: ["@babel/preset-env"] }))
.pipe(dest('temp'))
.pipe(bs.reload({ stream: true }))
}
6. ESLint 结合 Webpack
- 安装
eslint模块 - 安装
eslint-loader模块 - 初始化
.eslintrc.js配置文件
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: 'babel-loader'
},
{
test: /\.js$/,
exclude: /node_modules/,
use: 'eslint-loader'
},
]
- 如果是
react项目，下载一个单独的插件来辅助
npm install eslint-plugin-react
// .eslintrc.js
rules: [
'react/jsx-uses-react': 2,
'react/jsx-uses-vars': 2
],
plugins: [
'react'
]
对于大多数 ESLint 插件来说，一般会提供一个共享的配置，从而来降低我们的使用成本 -- 如下
// .eslintrc.js
extends: [
'standard',
'plugin:react/recommended'
],
rules: [
// 'react/jsx-uses-react': 2,
// 'react/jsx-uses-vars': 2
],
plugins: [
// 'react'
]
7. ESLint 检查 TypeScript
记得先安装 typescript
// .eslintrc.js
// 需要配置语法解析器
parser: '@typescript-eslint/parser',
plugins: [
'@typescript-eslint'
]
1. Stylelint
- 提供默认的代码检查规则
- 提供
CLI工具，快速调用 - 通过插件支持
SassLessPostCSS - 支持
Gulp或Webpack集成 - 使用可用的共享配置 -
stylelint-config-standard
# 安装
npm install stylelint
# 使用
# 需要添加配置文件
# .stylelintrc.js
// .stylelintrc.js
module.exports = {
extends: "stylelint-config-standard" // 和 eslint不一样 这里需要配置共享配置的全称
}
// 执行
// npx stylelint ./index.css
- 如果要检验
sass代码
npm install stylelint-config-sass-guidelines
// npm install stylelint-config-sass-guidelines
// .stylelintrc.js
module.exports = {
extends: [
"stylelint-config-standard",
"stylelint-config-sass-guidelines"
]
}
1. Prettier 的使用
前端代码格式化工具
# 安装
npm install prettier -D
# 执行
npx prettier style.css # 是将格式化好的内容输出到控制台
# 如果想直接覆盖原文件
npx prettier style.css --write
# 处理所有文件
npx prettier . --write
- 背景：如果代码提交至仓库之前未执行
lint工作
通过 Git Hooks 在代码提交前强制 lint
Git Hooks 介绍
-
Git Hooks也称之为git钩子，每个钩子都对应一个任务 - 通过
shell脚本可以编写钩子任务触发时要具体执行的操作
# 进入 .git 找到 hooks 里面有一个 pre-commit.sample
# 复制一份 重新命名为 pre-commit
# 进行修改 发现在我们 commit时是会触发的
ESLint 结合 Git Hooks
- 因为很多前端开发者并不擅长使用
shell - 有人开发了一个
npm模块 -Husky
// 在 package.json 当中配置如下
{
"husky": {
"hooks": {
"pre-commit": "npm run xxx"
}
}
}
- 和
lint-staged配合使用
npm install lint-staged -D
// package.json
{
"scripts": {
"precommit": "lint-staged"
},
"husky": {
"hooks": {
"pre-commit": "npm run precommit" // npm run xxx
}
},
"lint-staged": {
"*.js": [
"eslint",
"git add" // 设置完了之后在 scripts 设置 一个命令
]
}
}