代码规范化

规范化标准

规范化是我们践行前端工程化中重要的一部分
为什么要有规范标准
- 软件开发需要多人协同
- 不同的开发者有不同的编码习惯和喜好
- 不同的喜好增加项目的维护成本
- 每个项目或者团队需要明确统一的标准
哪里需要规范化标准
- 代码，文档，甚至是提交日志
- 开发过程中国人为编写的成果物
- 代码标准化规范最为重要
实施规范化的方法
- 编码前人为的标准约定
- 通过工具实现lint
  - ESLint工具的使用
  - 定制ESLint校验规则
  - ESLint对Tyepscript的支持
  - ESLint结合自动化工具或者webpack
  - 基于ESlint的衍生工具

ESLint介绍

最主流的Javascript Lint工具监测JS代码质量
ESLint很容易统一开发者的编码风格
ESLint也可以帮助开发者提升编码能力

ESlint安装步骤

初始化项目
安装ESLint模块为开发依赖
通过CLI命令验证安装结果
npm init
npm install eslint --save-dev
npm eslint --version或者cd node_modules cd .bin eslint --version
使用eslint进行检测
完成eslint使用配置
npx eslint '通配符或者文件路径'
直接使用上面的命令会报错，显示没有找到配置文件，需要进行eslint init
进入询问选择环节，进行选择

ESLint配置文件解析

//.eslintrc.js//通过npm elsint init生成的
module.exports = {
  env:{
    brower:true,
    es2020:true
  },
  extends:[
    // 定义公共的配置文件和模块，在这里去继承就可以了
    // 找个属性可以是一个数组，说明可以继承多个属性配置
    'standard'
  ],
  parserOptions:{
    // 用来设置语法解释器的相关配置
    // 注意的是，他只是检测语法，而不是代表某成员可用
    // 成员可用在env中配置，比如promise
    ecmaVersion:11
  },
  rules:{
     // 添加一个内置的规则,值有off，warn，error
     'no-alert':""
  },
  // 这个选项在最新版中已经没有声明了
  globals:{
    // 用于表示可以使用的全局变量
    "jQuery":'readonly'
  }
}

ESLint 配置注释

将配置通过注释的方式，直接写在脚本文件之中，然后再去执行代码的校验
用来解决，可能会遇到必须违反规则的某一两个点，但不能为了这两个点去推翻规则，所以需要用到注释配置
//eslint-disable-line//忽略一行的eslint校验
// eslint-dsable-lint '规则名称' //就能忽略此规则，其他的问题也能发现
还可以临时修改某个配置，开启全局变量，临时开启某个环境等等功能

ESLint结合自动化工具

集成之后，ESLint一定会工作
与项目统一，管理更加方便

ESLint结合webpack

eslint集成进webpack并不是以插件的形式，而是loader机制
- 安装eslint模块
- 安装eslint-loadermok
- 初始化.eslintrc.js配置文件

//webpack.config.js
import HtmlWebpackPlugin from 'html-webpack-plugin'
module.exports = {
  mode:'production',
  entry:'./src/main.js',
  module:{
    rules:[
      {
        test:/\.js$/,
        exclude:/node_modules/,
        use:'babel-loader'
      },
      {
        test:/\.js$/,
        exclude:/node_modules/,
        use:'eslint-loader',
        enfore:'pre'//保证eslint-loader为最先执行
      },
      {
        test:/\.css$/,
        use:[
          'style-loader',
          'css-loader'
        ]
      }
    ]
  },
  plugins:[
    new HtmlWebpackPlugin({
      template:'src/index.html'
    })
  ]
}


//.eslintrc.js
module.exports = {
  env:{
    brower:true,
    es2020:true
  },
  extends:[
    'standard'
  ],
  parserOptions:{

    ecmaVersion:11
  },
  rules:{
     'no-alert':""
  },
}

如果是针对react代码，需要安装eslint-plugin-react

//.eslintrc.js
module.exports = {
  env:{
    brower:true,
    es2020:true
  },
  extends:[
    'standard'
  ],
  parserOptions:{
    ecmaVersion:11
  },
  rules:{
    //然后就可以直接去开启某些规则，具体看node_modules里面的插件
    'react/jsx-uses-vars:2,//避免app没有定义的报错
    'react/jsx-uses-react':2,//通过数字2去开启，避免报错，react定义了没有使用
  },
  plugins:[
    // 可以扩展eslint的插件，同时配置的时候，去掉eslint-plugin前缀
    'react'
  ]
}

配置完就可以使用npx webapck进行打包
一般eslint的插件都会提供一些共享的配置，可以去进行继承，去降低使用的成本
继承的规则一般是plugin:继承的插件名称/具体的配置名字

//.eslintrc.js
module.exports = {
  env:{
    brower:true,
    es2020:true
  },
  extends:[
    'standard',
    'plugin:react/recommended'
  ],
  parserOptions:{
    ecmaVersion:11
  },
}

再进行打包工作，也可以

ESlint检查TypeScript的情况

npm eslint init进行询问选择，当遇到typescript询问的时候，选择是，并安装相应的模块

//.eslintrc.js
module.exports = {
  env:{
    brower:true,
    es2020:true
  },
  extends:[
    'standard',
  ],
  parserOptions:{
    ecmaVersion:11
  },
  parser:'@typescript-eslint/parser',//语法解析器
  // 因为ts和其他的不太一样，因此需要一个专门的语法解析器
  plugins:[
    '@typescript-eslint',
  ]
}

stylelint

用于检测css代码规范
也提供了一系列的代码检查规则
提供CLI工具，快速调用
通过插件支持Sass，Less，PostCss
支持gulp或webpack的集成
npm install stylelint -D
添加配置文件.stylelintrc.js

// 配置属性和eslint很类似
// 但stylelint没有提供任何初始的配置可以继承
// 可以先安装stylelint-config-standard
module.exports = {
  extend:'stylelint-config-standard',//但这里的名称必须是一个完整的模块名称
}

npx stylelint ./index.css
如果是校验sass代码
npm install stylelint-config-sass-guidelines -D
修改配置文件

module.exports = {
  extend:[
    'stylelint-config-standard',
    'stylelint-config-sass-guidelines'
  ]
}

npx stylelint index.sass

Prettier

前端代码格式化工具
可以格式化css，js，html，md，vue等文件
npm install prettier -D
npx prettier index.css// 默认是将格式化后的代码输出到控制台
npx prettier index.css --write// 覆盖到原文件中
npx prettier . --write //格式化所有文件

Git hooks工作机制

可能会遇到代码提交之前未进行eslint工作
git hook的每一个钩子对应一个任务
通过shell脚本可以编写钩子任务触发时要具体执行的操作
git init初始化后，有一个.git目录，目录下有一个hooks目录
里面存放了一些sample文件，里面的每一个sample就是一个钩子
但我们主要关注时的pre-commit.sample，因为这个就是commit钩子
当我们进行commit的时候，会触发的一些任务

eslint结合git hooks

husky可以实现git hooks的使用需求
npm install husky -D
安装完成之后，就可以在package.json文件里面添加husky字段
husky字段里面有hooks，hooks里面都是各种钩子，而我们最需要pre-commit钩子
所以可以直接定义pre-commit为npm run test
然后在commit之前，就会先执行这里面的内容
将script里面test设置成eslint操作

代码规范化

规范化标准

ESLint介绍

ESlint安装步骤

ESLint配置文件解析

ESLint 配置注释

ESLint结合自动化工具

ESLint结合webpack

ESlint检查TypeScript的情况

stylelint

Prettier

Git hooks工作机制

eslint结合git hooks

你可能感兴趣的:(代码规范化)