ESLint

规范化标准

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

• 因为软件开发需要多人协同
• 不同开发者代码风格不同
• 增加项目开发成本
• 团队需要明确同一的标准

需要标准化地方

• 代码、文档、提交日志
• 开发中编写的代码
• 代码标准化很重要
• 实施方法 人为约定 工具实现Lint

常见的规范化实现

ESLint使用

• 定制ESLint校验规则
• ESLint对TS的支持
• ESLint结合自动化工具或webpack
• ESLint的衍生工具
  Stylelint工具的使用

ESLint介绍

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

ESLint安装

步骤

初始化项目
安装ESLint模块作为开发依赖
通过CLI命令验证安装结果
npm init --yes
npm install eslint --save-dev  作为项目依赖安装到项目
在node_modules下bin目录会多出一个ESlint的可执行文件
cd .\node_modules
cd .\.bin
.\eslint --version  查看安装版本   
或者直接 yarn --version
或者  npx eslint --version

使用

ESLint 检查步骤
编写问题代码
使用eslint执行检测
完成eslint使用配置

新建 js 文件

const foo = 123;
function fn(){
    console.log('hello')
   
   
   
            console.log('eslint');   
}

fn (
    syy()

执行
npx eslint js文件名
会显示错误并提示没有eslint的配置文件

新建eslint配置文件

npx eslint --init

一般配置选项选择第三项 ，代码检查语法等都包含
第二选择项 是指模块化标准
第三项是选择哪个框架
第四项是否使用TS
第五项选择 运行环境
第六项 选择代码风格
最后一项选择 配置文件格式 js/json/yaml

会在项目下 新增  .eslintrc.js
再次执行  npx eslint   js文件名     
会将错误抛出
执行  npx eslint js文件名  --fix   修改语法风格错误

ESLint 配置文件解析

修改关闭某些校验规则
默认配置文件

module.exports = {
  'env': {  // 标记当前代码运行环境
    'browser': true, // 代码运行在浏览器环境中
    'es2021': true,  
  },
  'extends': [  // 进行一些共享的配置，例如 google 的代码配置，可支持多个
    'google',
  ],
  'parserOptions': { // 设置语法解析器的相关配置，如果修改ecmaVersion：5 ，就使用不了es6代码特性
    'ecmaVersion': 12,
  },
  'rules': { /配置eslint 规则中每个规则的开启或者关闭
     // 'no-alert': 'off/on/error'  开启，关闭，或者警告
  },
  globals: { // 在代码中使用的全局成员，但是新版特性已经不在体现
      "jQuery": 'readonly',  // 可以在其他js文件中直接使用 jQuery
  }
};

ESLint 配置注释

const str1 = "${name} is a coder"
console.log(str1);

1:14  error  Strings must use singlequote                   quotes    
1:34  error  Missing semicolon                              semi      
2:19  error  Newline required at end of file but not found  eol-last  

http://eslint.cn/docs/user-guide 官方网站

ESLint 结合自动化工具

集成之后，ESLint 一定会工作
项目统一，管理更加方便
结合webpack
以loader形式集成到webpack中，先将打包js代码之前，通过ESLint校验

const HtmlWebpackPlugin = require('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',  // loader是从后向前执行，放到js最后
        enforce: 'pre'
      },
      {
        test: /\.css$/, 
        use: [
          'style-loader',
          'css-loader'
        ]
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: 'src/index.html'
    })
  ]
}

执行 npx webpack 执行打包
会抛出错误
react 使用 需要安装
npm install eslint-plugin-react

module.exports = {
  'env': {
    'browser': true,
    'es2021': true,
  },
  'extends': [
    'google',
  ],
  'parserOptions': {
    'ecmaVersion': 12,
  },
  'rules': {
    'react/jsx-uses-react': 2,
    'react/jsx-uses-vars': 2
  },
  plugins:[
    'react'
  ]
};

现代化项目集成ESLint

vue集成使用eslint
npm install @vue/cli -g    //全局安装vue
vue create syy-vue-app 
可选择eslint选项
启动项目自动校验

ESLint 校验TS

module.exports = {
  env: {
    browser: true,
    es2020: true
  },
  extends: [
    'standard'
  ],
  parser: '@typescript-eslint/parser',
  parserOptions: {
    ecmaVersion: 11
  },
  plugins: [
    '@typescript-eslint'
  ],
  rules: {
  }
}

Stylelint 认识

提供默认的代码检查规则
提供cli弓，快速调用
通过插件支持Sass Less PostCSS
支持Gulp或Webpack 集成

使用可以参考ESLint
安装
npm install stylelint -D
npx stylelint ./index.css 测试
npm install stylelint-config-standard
安装配置文件 .stylelint.js

module.exports = {
    extends: "stylelint-config-standard"
}

npx stylelint ./index.css --fix 修复

使用sass

npm install stylelint-config-sass-guidelines -D

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

Prettier

一款通用的前端代码格式化工具，可以使用其完成代码自动格式化，或是markdown等的格式化操作
npm install prettier -D
测试 npx prettier style.css
npx prettier style.css --write 覆盖原文件
npx prettier . --write 覆盖所有原文件

Git Hooks
代码未提交至仓库前未执行lint工作
通过Git Hooks在提代码前强制lint
git Hooks也称为git 钩子，每个钩子都对应一个任务
通过shell脚本可以编写钩子任务触发时具体执行的操作
通过钩子可执行eslint操作