par2-模块2-规范化标准【ESLink】

为什么要有规范化标准

•  软件开发需要多人协同
•  不同开发者具有不同的编码习惯和喜好
•  不同的喜好增加项目维护成本
•  每个项目或者团队需要明确统一的标准

那里需要规范化标准

• 代码、文档、甚至是提交日志
• 开发过程中人为编写的成果物
• 代码标准化规范最为重要

实施规范化标准的方法

• 编码前人为的标准约定
• 通过工具实现 Lint

常见的规范化实现方式

• ESLint  工具使用
• 定制 ESLint 校验规则
• ESLint 对 TypeScript 的支持
• ESLint 结合自动化工具或者 Webpack
• 基于 ESLint 的衍生工具
• Stylelint 工具的使用

eslint

   1: ESLint介绍

          最为主流的 JavaScript Lint 工具 监测 JS 代码质量

           ESLint 很容易统一开发者的编码风格
          ESLint 可以帮助开发者提升编码能力          

    2: eslint 安装       

npm install eslint  --save-dev

    3: eslint快速上手

         ESLint 检查步骤                    

• 编写“问题”代码
• 使用 eslint 执行检测
• 完成 eslint 使用配置

        1: 校验文件：

              执行： eslint ./01-prepare.js        //  让 esLint 自动检验 01-prepare.js 文件

              报错： ESLint 找不到配置文件。要设置此项目的配置文件，请运行: eslint --init

          2: 初始化  eslint   配置文件

              执行 ：eslint --init ---- >按照提示安装

              运行 eslint --init 之后， 在你的文件夹中会自动创建  .eslintrc 文件。

              你可以在 .eslintrc 文件中看到许多像这样的规则：

          3:  校验文件并修复

              再次执行  eslint ./01-prepare.js --fix  

               加上 --fix 参数，是 Eslint 提供的自动修复基础错误的功能。

     4: 配置注释 - 让 eslint 对部分代码不进行（某项或全部规则）的检查 

/* index.js 文件 */
 
// 跳过对当前行的检查
console.log('123'); // eslint-disable-line
 
// 跳过对当前的 某个规则 的检查
const str1 = "${name} is a coder" // eslint-disable-line no-template-curly-in-string
 
// 跳过对下一行的检查
// eslint-disable-next-line
alert('foo');
  
 
/* detail.js 文件 - 跳过对本文件的检查  */

     5: eslint 结合自动化工具 gulp

          1:  配置 gulpfile.js       

const plugins =loadPlugins() // plugins变成一个拥有所有插件方法的集合方法，
const script = () => {
    return src('src/assets/scripts/*.js', { base: 'src' })
        // babel将es6---转化为 es5
        // @babel/preset-env：是一个所有功能性插件的集合插件
        //.pipe(babel({ presets: ['@babel/preset-env'] }))
        .pipe(plugins.eslint()) // 打包之前进行eslint代码检测
        .pipe(plugins.eslint.format()) // 打印 eslint 检查结果
        .pipe(plugins.eslint.failAfterError()) // eslint 如有报错，则本任务终止
        .pipe(plugins.babel({ presets: ['@babel/preset-env'] }))
        .pipe(dest('temp'))
        .pipe(bs.reload({ stream: true }))
}

module.exports = {
    script
}

           2: 执行： gulp script            

    6: eslint 结合 webpack     

            1: 安装 eslint  和  eslint-loader

npm install eslint eslint-loader --save-dev

            2:  初始化 eslint 配置文件   

eslint init

          3: 配置 webpack.config.js 中的 rules

{
       test: /.js$/,
       use: {
           loader: 'babel-loader', // babel-loader作用：加载插件@babel-preset-env
           options: {
              presets: ['@babel-preset-env'] // @babel-preset-env是一个集合插件，实现各种功能              
           }                              
       }                   
},
{
        test: /\.js$/, 
        exclude: /node_modules/, 
        use: {
          loader:'eslint-loader',
          options:{
            fix: true
          }
        },
        enforce: "pre"
},

            通过 enforce: "pre" 设置匹配到js文件优先执行这个loader，通过 options 中的 fix，设置自动处理代码风格问题。 

          4: 执行：webpack

           正常执行 webpack 打包就会触发 eslint 检测代码，如此就能在 webpack 中使用 eslint 检测代码问题了。

    7:  webpack后续配置

          我的打包入口文件内容如下  ：               

import React from 'react'
import ReactDOM from 'react-dom'
import './global.css'
import App from './components/App'
ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
)

         执行 webpack 打包后报错：

        提示 React 从未使用，从代码本身分析，这个 React 确实没有被用到，但是这个 React 是 JSX 编译过后必须用到的，所以像这种特殊的情况， eslint 就必须靠一些额外的插件来实现。社区中专门为 React 这种语法提供了一个插件，那就是 eslint-plugin-react。

npm install eslint-plugin-react --save-dev

安装过后可以打开这个插件中的对应的模块。

这个模块中定义了很多校验规则，而这些规则都是针对于 react 项目的。我们要使用这些规则，就直接在.eslintrc.js 中通过 plugins 属性进行配置。

module.exports = {
  env: {
    browser: true,
    es2021: true
  },
  extends: [
    'standard'
  ],
  parserOptions: {
    ecmaVersion: 12
  },
  rules: {
  	// 需要在plugins中配置"react"才可以使用这些规则
  	"react/jsx-uses-react":2, // 这里用数字2 代替error，这个规则的作用就是用来避免React定义了却没有使用的报错
    "react/jsx-uses-vars":2 // 解决App从未使用的报错
  },
  // plugins是一个数组，在其中可以直接指定我们去使用一些插件，我们要使用eslint-plugin-react插件
  plugins:[
  	"react" // 因为这里的插件名会去掉eslint-plugin的前缀，配置之后其中的所有规则我们都可以使用了 
  ]
}

此时再去执行 webpack 打包，就不会有 React 和 App 的报错了。

     不过对于大多数的 eslint 插件来说，一般都会去提供一个共享的配置，从而降低我们使用的成本，我们这里使用的 eslint-plugin-react，其中就导出了共享的配置，分别是 recommended和all，我们现在要使用的就是recommend。插件中提供了共享配置，我们就可以直接通过继承去使用，不过在继承的时候需要去遵守它的语法规则。就是  plugin:插件名/具体配置名称

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

      执行打包，eslint 检测代码没有任何问题了。
 

styleLint

      Stylelint 使用介绍

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

 1: 新建 .stylelintrc.js  配置文件

module.exports = {
  extends: []
}

  2: 安装 插件

        stylelint-config-standard【对css,  scss 做审核】

        stylelint-config-sass-guidelines【对 sass 做审核】

npm install stylelint-config-standard --save-dev

npm install stylelint-config-sass-guidelines --save-dev

 3:  配置 .stylelintrc.js 

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

  4: 执行：stylelint ./index.css   

      执行： stylelint ./index.sass  

Prettier

r  Prettier 是一个“有主见”的代码格式化工具

  1: 安装 Prettier

npm install prettier --save-dev

 2: 执行 Prettier

npx prettier src/index.css // 将格式出错代码输出到控制台
npx prettier src/index.css --write  // 将格式后的代码，覆盖到原文件
npx prettier --write src/index.js
// 再去看格式化之后的index.js，已经重新输出成固定格式了。

npx prettier . --write // 将所有文件都格式化处理，然后重新覆盖原文件

 etti