规范化标准

目录

一、规范化介绍

二、ESLint 介绍 

三、ESLint 安装 

四、ESLint 快速上手 

五、ESLint 配置文件解析 

六、ESLint 配置注释 

七、ESLint 结合自动化工具 

八、ESLint 结合 Webpack 

九、现代化项目集成 ESlint 

十、Stylelint 认识 

十一、Prettier 的使用 ：完成自动格式化

十二、Git Hooks 工作机制 :通过 GitHooks 在代码提交前强制 lint,检查有问题的代码

十三、ESLint 结合 Git Hooks 

---

eslint 官方文档：Getting Started with ESLint - ESLint中文文档 

一、规范化介绍

• 为什么要有规范标准
  
  （1）软件开发需要多人协同
  
  （2）不同开发者具有不同的编码习惯和喜好
  
  （3）不同的喜好增加项目维护成本
  
  （4）每个项目或者团队需要明确统一的标准
   
• 哪里需要规范化标准
  
  （1）代码、文档、甚至是提交日志
  
  （2）开发过程中认为便携的成果物
  
  （3）代码标准化规范最为重要
   
• 实施规范化的方法 
  
  （1）编码前认为的标准约定
  
  （2）通过工具实现 Lint
  
  （3）常见的规范化实现方式
  
           A、ESLint 工具使用
  
           B、定制 ESLint  校验规则
  
           C、 ESLint  对 TypeScript 的支持
  
           D、ESLint  结合自动化工具或者 Webpack
  
           E、基于 ESLint  的衍生工具
  
           F、 Stylelint 工具的使用

二、ESLint 介绍 

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

三、ESLint 安装 

• 初始化项目 npm init --yes
• 安装 ESLint 模块为开发依赖 npm install eslint --save--dev
• 通过 CLI 命令验证安装结果 
  
  cd .\node_modules\   
  
  cd .\.bin\    .
  
  eslint --version 或者 npx eslint --version

 四、ESLint 快速上手 

•  编写“问题”代码
• 完成 eslint 使用配置
  
  npx eslint --init
   
• 使用 eslint 执行检测 
  
  npx eslint  .\01-prepare.js --fix

五、ESLint 配置文件解析 

// .eslintrc.js

module.exports = {
  env: { // 根据运行环境判断成员是否可用
    browser: tru