标准化规范

概念

• 规范化是我们践行前端工程化中重要的一部分

实施规范化的方法

• 编写标准约定
• 通过工具实现lint,包含ESLint 和StyleLint

ESLint介绍

• 最为主流的JavaScript Lint工具,检测 Js代码质量
• ESLint很容易统一开发者的编码风格
• ESLint可以帮助开发者提升编码能力

ESLint安装

• 安装eslint依赖

$ yarn add eslint -D

ESLint快速上手

ESLint检查步骤

1. 编写 “问题” 代码
2. 使用eslint执行检测
3. 完成eslint使用配置

实例

创建demo

安装eslint配置文件

$ yarn eslint index.js

• 安装eslint的配置文件

$ yarn eslint --init 

• 问题1 How would you like to use ESLint?你想怎么使用ESLint (优先选择第三种)
  
  语法错误: 比如var 写成了 vbr
  问题代码:比如使用了未定义的变量
  代码风格: 最初的时候,我们对ESLint的期望是找出代码在风格上存在的问题,比如缩进

• 问题2 What type of modules does your project use? 项目中模块化采用的是哪种方类型()–我们先不使用模块化,选择第三个
  

• 问题3 Which framework does your project use? 项目用的什么框架 ,我们先不使用框架,选择第三个
  

• 问题4 Does your project use TypeScript? 项目中有没有使用TypeScript,我们先不使用TypeScript,选择NO
  

• 问题5 Where does your code run? 代码最终运行在什么环境中,选择Browser
  

• 问题6 How would you like to define a style for your project?你想怎样定义项目的风格,最好选择市面上的主流风格
  
  Use a popular style guide:使用一个市面上的主流风格
  Answer questions about your style:通过询问你一些问题形成一个风格
  Inspect your JavaScript file(s):根据你js文件推断出你的风格

• 问题7 Which style guide do you want to follow?市面上的三个主流风格,选择开源社区规范
  

• 问题8 What format do you want your config file to be in?你的配置文件想要以何种格式的文件进行存放(eslint配置文件的格式),建议JavaScript格式:在配置文件中添加一些条件判断,从而决定是否开启某些功能
  

• 问题9 Would you like to install them now with npm?上面的选项需要依赖一些第三方包,是否通过npm下载这些依赖,选择YES

• 在项目根目录下生成.eslintrc.js配置文件
  

• 通过eslint命令(实际上是执行了.eslintrc.js)来检查指定的js文件
  

• 改建:修改语法错误的代码后,再通过eslint检查风格错误(之前选择的是Standard风格)

当有代码风格报错的时候,两种解决方案
a:根据eslint错误提示一个一个修复
b:通过–fix参数来自动修正绝大多数代码风格上的问题

$ yarn eslint index.js --fix

报错一:Expected indentation of 2 spaces but found 4 indent:作为一个代码规范插件，ESLint 限定缩进是 2 个空格，而我们一般使用 Tab 键的缩进是 4 个空格
解决办法:
a:关闭 ESLint 这个检查规则,打开 .eslintrc.js 配置文件，加入一行配置 “indent”:[“off”,2] =不推荐

rules: {
  "indent": ["off", 2]
}

b:打开 VSCode 的设置页面，在搜索框中输入 Tab Size，将用户区和工作区的 Tab Size 均设置为 2

但是我们自动保存格式化的时候,并没有将一个缩进4个空格变成2个空格

点击蓝色链接,在源文件中格式化,则一个缩进4个空格变成一个缩进2个空格

报错二 Newline required at end of file but not found eol-last:在文件末尾需要换行，但在最后一次找不到下线

改进:在最后加上一行空白

问题一和问题二解决完毕后,在用eslint检查

ESLint配置文件解析

module.exports = {
  env: {
    browser: true,
    es2021: true
  },
  extends: [
    'standard'
  ],
  parserOptions: {
    ecmaVersion: 12
  },
}

• 通过yarn eslint --init在项目根目录下生成的.eslintrc.js配置文件,.eslintrc.js中写入的配置会影响当前目录及所有子目录的文件,如果我们要开启或者关闭某些校验规则,需要修改相关配置项

ESLint配置文件的选项

env

• 概念:标记当前代码的运行环境,一个环境对应一组预设的全局环境变量
• 作用:eslint会根据当前的运行环境判断某一个全局成员是否能用,从而避免代码中使用不存在的成员,不如在browser(浏览器环境下)不能使用process全局变量,在Node环境中不能使用window全局变量

env: {
    browser: true,  // 浏览器环境
    es2021: true // 使用最新的ECMAScript语法,如果设置为es2015:true,
    		    //则不能使用ES6的新语法
  },

• 可以同时指定多个环境

 env: {
    browser: true,  // 浏览器环境
    node: true,// 浏览器环境
    es2021: true
  },

extends

• 概念:继承共享的配置
• 作用:使用什么样的代码风格,上面我们选择的是standard,该属性可以是一个数组,继承多个共享配置

parserOptions

• 作用:用法设置语法解析器的配置,用哪个版本的ECMAScript版本来做语法解析, 当 ecmaVersion: 5时,则不能使用ES6中的新语法
• 注意点:parserOptions中的 ecmaVersion版本配置,影响的只是语法检测,不代表某个成员是否可用

module.exports = {
  env: {
    browser: true,
    es6: false //es6中的全局变量找不到
  },
  extends: [
    'standard'
  ],
  parserOptions: {
    ecmaVersion: 2015 //只要是es2015中的语法都不会报错
  },
}

rules

• 概念:配置eslint中每个校验规则的开启和关闭
• 键:内置的规则名称 值:off(关闭校验)/warn(提出警告)/error(直接报错)
• 实例 不允许alert()

rules: {
  "no-alert": "error"
}

• 具体有哪些规则可用eslint官网上给出了所有内置的可用校验规则列表,我们可以在使用的时候进行查看,而目前所使用的standard风格当中已经开启了很多的eslint内置规则,当我们需要关闭standard风格中默认开启的eslint内置规则,则可以在rules对相应的eslint内置规则进行修改去覆盖

ESLint 配置注释

背景

• 我们在实际的开发过程中,难免会遇到一两个违反ESLint配置规则的情况,这种情况下我们肯定不能因为这一两个点就去推翻校验规则的配置,这时可以使用ESLint 配置注释去解决问题

用法

• 将配置直接通过注释的方式写在我们的js文件当中,然后执行代码的校验
  

语法1: 忽略某一行的eslint校验 (还有很多其他的语法可以看eslint官网)

• eslint-disable-line =>忽略当前行所有的校验规则
  
• eslint-disable-line +校验规则 => 忽略当前行该校验规则
  

ESLint结合自动化工具

ESLint结合Webpack

• Webpack中的ESLint并不是以插件的形式集成的,而是通过loader机制,webpack打包的时候会将对应的模块交个loader处理,所以ESLint可以通过loader形式集成到Webpack当中,这样可以在实现打包js代码之前先通过ESLint来校验js代码

Webpack中集成ESLint步骤

• 添加项目的ESLint配置文件

$ yarn add eslint -D 
$ yarn eslint --init

• 安装eslint-loader

$ yarn add eslint-loader

• 在webpack.config.js配置文件中

{
  test: /\.js$/,
  exclude: /node_modules/,
  use: "eslint-loader",
  enforce: 'pre' // 当遇到js模块时,优先使用eslint-loader处理
}

• 打包

$ yarn build

现代化项目集成ESLint

vue-cli预装ESLint简介

• 利用vue-cli创建一个项目

$ vue create szy

问题:Pick additional lint features?:在什么环节进项lint检查(两个都选上)

问题:Where do you prefer placing config for Babel, ESLint, etc.?想要怎样存放Babel, ESLint, etc.的配置文件(选择单独存放)

• 当我们在项目中修改文件或者commit提高代码时,都会自动进项lint检测,终端提示错误

vscode格式化Vue出现的问题

现象

VSCode中使用vetur插件格式化vue文件时，js代码会自动将单引号变成双引号即末尾加上分号

原因分析

vetur默认设置是这个样的。也就是很多是用的prettier插件

解决办法

• 安装prettier依赖

$ yarn add prettier --dev --exact

• 项目根目录下添加.prettierrc.json配置文件,修改prettier 默认的lint检测规则

{
    "singleQuote":true,//使用单引号而不是双引号,true就是对
    "semi":false//在语句结尾处打印分号,false就是不打印
}

StyleLint的认识

背景

在前端项目中,js代码需要被lint外=>eslint,css代码也需要被lint=>stylelint

介绍

• 提供了默认的代码检查规则
• 提供cli工具,快速调用
• 通过插件支持Sass Less PostCss代码检查
• 支持Gulp或Webpack集成使用

步骤

• 安装stylelint

$ yarn add stylelint -D

• 手动添加stylelint的配置文件.stylelintrc.js,不能向eslint可以通过yarn eslint --init命令自动生成eslint的配置文件
• stylelint内部没有提供任何可用的共享配置 ,eslint提供了standard,所以在.stylelintrc.js的extends选项中要继承的模块需要我们自己安装

css代码的检测

• 安装继承模块

$ yarn add stylelint-config-standard -D

• 在.stylelintrc.js中使用这个继承模块

module.exports = {
  extends: [
    'stylelint-config-standard'
  ],
  rules: {
  }
}

• 使用stylelint命令检测css文件

$ yarn stylelint index.css

• 使用stylelint命令检测css文件并自动修复

$ yarn stylelint index.css --fix

sass代码检测

• 安装检测sass代码的模块,让stylelint继承

$ yarn add stylelint-config-sass-guidelines -D

• 在.stylelintrc.js中使用这个继承模块(因为同时继承两个模块=>分别检测css和sass)

module.exports = {
  extends: [
    'stylelint-config-standard', //检测css
    'stylelint-config-sass-guidelines' //检测sass
  ],
  rules: {
  }
}

• 使用stylelint命令检测css文件

$ yarn stylelint index.sass

Prettier 通用代码格式化工具

• 几乎可以完成所有类型(js,css,html,vue)代码的格式化工作

使用步骤

• 安装Prettier

$ yarn add prettier -D

• 使用prettier命令对相应文件进行格式化

$ yarn prettier index.css

• 覆盖原文件 => prettier 命令加上–write参数
  

一次性格式化根目录下所有的文件

$ yarn stylelint . --write

Git Hooks介绍

背景

• 代码提交至仓库之前为执行lint工作,直接把有问题的代码提交到远程仓库
• 通过Git Hooks在代码提交前强制lint

概念

• Git Hooks 也称之为git钩子,每个钩子都对应一个任务
• 通过shell脚本可以编写钩子任务触发时要具体执行的操作

使用

• git初始化项目

$ git init

• .gitignore文件,其实还有一个隐藏的文件
  
• 显示隐藏文件 组织=>文件夹和搜索选项=>查看=>显示隐藏文件
  
  
  
• 复制pre-commit.sample脚本,把后缀去掉
  
  
• 提交代码至仓库

$ git status
$ git add .
$ git commit -m "12"

• Git Hooks的工作机制:通过钩子来对应具体的git操作,然后在这个操作发生的时候自动执行钩子里所定义的任务

ESLint 结合 Git Hooks

背景

• 通过Git Hooks在代码提交前强制lint

现实问题

• 很多前端开发者并擅长使用shell(上面创建pre-commit脚本并添加任务的操作)来编写一些功能,但这些功能又是我们需要使用的
• 有些人开发了一些npm模块集成了这些shell操作,直接将Git Hooks的操作进行简单化的实现,这个模块就是 HUsky

Husky

• Husky可以实现Git Hooks的使用需求,在不编写shell脚本的情况下,也能够去直接使用git 钩子所带来的功能
• 安装Husky模块

$ yarn add husky -D

• 在package.json添加husky配置,为里面的不同hooks(钩子)添加任务
  
  
• 修改具体的任务,实现不同的需求

"scripts": {
  "test": "eslint ./index.js"
}

• 当我们想要在lint检查之后,继续执行后续的任务,比如将检测后的代码格式化并覆盖原文件,husky就显得不够用的,我们介绍另一个功能模块=>lint-staged,该模块就是辅助husky执行多个任务

lint-staged

• 安装模块

$ yarn add lint-staged -D

• 在package.json添加lint-staged配