文章说明:本文章为拉钩大前端训练营所做笔记和心得,若有不当之处,还望各位指出与教导,谢谢 !
规范化标准
为什么要有规范化标准?
- 软件开发需要多人协同;
- 不同开发者具有不同的编码习惯和喜好;
- 不同的喜好增加项目维护成本;
- 每个项目或者团队需要明确统一的标准。
哪里需要规范化标准
- 代码、文档、甚至是提交日志;
- 开发过程中人为编写的成果物;
- 代码标准化规范最为重要
实施规范化的方法
- 编码前人为的标准约定;
- 通过工具实现 Lint (通过工具找到代码中不规范的过程)
ESLint
- 最为主流的 JavaScript Lint 工具监测 JS 代码质量;
- ESLint 很容易统一开发者的编码风格;
- ESlint 可以帮助开发者提升编码能力。
准备工作:
1.初始化项目,初始化 package.json 包管理文件
yarn init --yes # or npm init -y
2.安装 ESLint 模块为开发依赖
yarn add eslint --dev # or npm install eslint --save-dev
3.通过 cd到对应的bin命令验证安装结果
.\eslint --version
4.通过yarn或者npm运行cli命令,验证安装结果
yarn eslint --version # or npx eslint --version
快速上手
ESLint 检查步骤:
1.编写 “问题” 代码:
01-prepare.js:
const foo=123
function fn(){
console.log("hello");
console.log("eslint");
}
fn(
syy()
2.使用 eslint 执行检测
$ yarn eslint xx.js # xx.js 指要被检测的文件
可以看到,提示没有找到配置文件,需要使用 eslint 的配置文件
3.完成eslint配置
$ yarn eslint --init # 初始化 eslint 配置文件
4.使用 --fix 自动修复代码风格上的绝大多数的问题
$ yarn eslint xx.js --fix # xx.js 指要被检测的文件
总结
1.ESLint 可以检测语法错误,找到问题代码,以及检测代码风格;
2.ESLint 可以自动修复代码风格上的绝大多数的问题。
配置文件
具体配置选项,请查看ESLint官网。
.eslintrc.js 配置文件 解析:
module.exports = {
// 标记当前代码最终的运行环境
// 可以同时标记多个环境
env: {
browser: false, // 浏览器
es6: false
},
// 继承一些共享的配置,可以同时继承多个共享配置
extends: [
'standard'
],
// 设置语法解析器的版本
parserOptions: {
ecmaVersion: 2015
},
// 配置 ESlint 中每个校验规则的开启或关闭
rules: {
// 属性值:内置的规则名称
// 属性值:off 关闭 warn 警告 error 错误
// 具体的查看 ESLint 官网
'no-alert': "error"
},
// 额外声明在代码中可以全局使用的成员
globals: {
"jQuery": "readonly"
}
}
配置注释
在编写代码时,通过注释的形式,使 ESLint 在进行代码检测时,忽略注释标注的代码。
const str1 = "${name} is a coder" // eslint-disable-line no-template-curly-in-string
console.log(str1)
具体规则,请查看 相关内容
集成
优势
1,集成之后,ESLint 一定会工作;
2,与项目统一,管理更加方便
gulp中的集成
1.项目克隆https://github.com/zce/zce-gulp-demo
2.完成依赖安装:
yarn install
3,完成 eslint 模块安装;
yarn add eslint --dev
4,完成 gulp-eslint 模块安装(gulp-eslint 是 gulp 中对于 eslint 的一个插件);
$ yarn add gulp-eslint --dev
5,初始化 eslint 配置文件
$ yarn eslint --init
基本使用
gulp-eslint 是 gulp 的一个插件,且检查的主要是 JS 编码,可以通过 pipe() 进行流的转换。
1.在 gulpfile.js 中,进行代码集成
const script = () => {
return src('src/assets/scripts/*.js', { base: 'src' })
.pipe(plugins.eslint())
.pipe(plugins.eslint.format()) // 在控制台输出 lint 结果
.pipe(plugins.eslint.failAfterError()) // 打印错误编码
.pipe(plugins.babel({ presets: ['@babel/preset-env'] }))
.pipe(dest('temp'))
.pipe(bs.reload({ stream: true }))
}
2.运行任务,会自动检测
yarn gulp script
Webpack集成eslint
1.项目克隆,https://github.com/zce/zce-react-app
2.安装对应模块
yarn install # or npm install
3.安装eslint模块
yarn add eslint --dev # or npm i eslint --save-dev
4.安装 eslint-loader 模块
yarn add eslint-loader --dev
5.初始化 .eslintrc.js 配置文件
yarn eslint --init
基本使用:
webpack 中是通过 eslint-loader 对 JS 代码实行检测的:
1.在 webpack.config.js 中,进行 loader 的配置:
module.exports = {
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: 'eslint-loader'
}
]
}
}
2.安装 eslint-plugin-react 插件,用来检测 react 语法
yarn add eslint-plugin-react --dev
3.在 .eslintrc.js 中,引入 插件 和 开启 react 相关规则:
module.exports = {
rules: {
// 2 代表 error
'react/jax-uses-react': 2,
'react/jax-uses-vars': 2
},
// 指定引用的插件
plugins: [
'react'
]
}
4.优化,采用 属性继承 的形式:
.eslintrc.js:
module.exports = {
extends: [
'standard',
'plugin: react/recommended' // 属性继承
]
}
Stylelint
基本介绍:
1.提供默认的代码检查规则;
2.提供 CLI 工具,快速调用;
3.通过插件支持 Sass Less PostCSS;
4.支持 Gulp 或 Webpack 集成。
基本使用:
Stylelint 的用法 和 ESLint 类似。
1.安装 stylelint 模块
yarn add stylelint --dev
2.初始化 .stylelintrc.js 配置文件
yarn stylelint --init
3.运行命令,进行自动检测
yarn stylelint xx.css
Prettier
基本介绍:
Prettier,通用的前端代码格式化工具,落实前端项目中的规范化标准。
基本使用:
1.安装 Prettier 模块
yarn add Prettier --dev
2.格式化指定文件的代码,默认在终端打印出有问题的代码:
yarn prettier xxx # xxx 代表文件名称
3.使用 --write ,完成所有文件的自动格式化
yarn prettier . --write
Git Hooks
通过 Git Hooks 在代码提交前强制Lint
基本介绍:
1.Git Hooks ,也称之为 git 钩子,每个钩子都对应一个任务;
2.通过 shell 脚本可以编写钩子任务,触发时要具体执行的操作。
工作机制:
在 .git 仓库中,存在 hooks 文件夹,里面存放了多个钩子文件,其中 pre-commit.sample 是代码 comiit 之前的钩子,内部编写了 commit 之前执行的操作。
存放目录,如下图所示:
基本使用:
NPM 模块 Husky 可以实现 Git Hooks 的使用需求。
1.安装 Husky 模块
yarn add husky --dev
2.在 package.json 中,添加 husky 配置
{
"scripts": {
"test": "eslint ."
},
"husky": {
"hooks": {
"pre-commit": "npm run test"
}
}
}
3.安装 lint-staged 模块
yarn add lint-staged --dev
4.在 package.json 中,添加 lint-staged 配置
{
"scripts": {
"test": "eslint .",
"precommit": "lint-staged"
},
"husky": {
"hooks": {
"pre-commit": "npm run precommit"
}
}
"lint-staged": {
"*.js": [
"eslint",
"git add"
]
}
}