規範化我的筆記

規範化標準

規範化是咱們踐行前端工程化中重要的一部分

• 爲何有規範標準
• 哪些須要規範化標準
• 實施規範化的方法

爲何有規範標準

• 軟件開發須要多協同，不一樣開發者具備不一樣的編碼習慣和喜愛，不一樣的喜愛增長項目維護成本，每一個項目或者團隊須要明確統一的標準

哪些須要規範化標準

• 代碼，文檔，甚至是提交日誌，開發過程當中人爲編寫的內容，代碼標準化規範最爲重要（統一關鍵詞和操做符左右空格，統一代碼的縮進方式，統一是否使用分號結尾，統一變量函數的命名規範）

實施規範化的方法

• 編碼前人爲的標準約定
• 經過工具實現 Lint（更嚴謹可靠，同時能夠配合自動化工具，自動檢查）

常見的規範化實現方式

• ESLint 工具使用
• 定製 ESLint 校驗規則
• ESLint 對 Typescript 的支持
• ESLint 結合自動化工具或者 Webpack
• 基於 ESLint 的衍生工具
• Stylelint 工具的使用 （對css進行校驗操做）

ESLint

• 最爲主流的JavaScript Lint 工具， 監測 JS 代碼質量
• ESLint 很容易統一開發者的編碼風格
• ESLint 能夠幫助開發者提高編碼能力

初始化項目，安裝 ESLint 模塊爲開發依賴

安裝：yarn add eslint --dev

完成 eslint 使用配置，編寫問題代碼，使用 eslint 執行檢測

使用 yarn eslint 文件.js 時，會報錯說未找到eslint 配置文件

經過yarn eslint --init 進行命令行交互

• 只檢查語法
• 檢查語法發現問題
• 檢查語法發現問題而且對代碼風格校驗

安裝事後生成 .eslintrc.js 文件

執行 yarn eslint ./文件.js，查看錯誤

配置文件

# .eslintrc.js

module.exports = {
  env: {
    browser: true,
    es2021: true
  },
  extends: [
    'standard'
  ],
  parserOptions: {
    ecmaVersion: 12
  },
  rules: {
    'no-alert':"error"
  }
}

env 設置運行環境，參數並不互斥

1. extends 繼承共享配置，能夠同時繼承多個共享配置，是個數組
2. parserOptions 設置語法解析器的相關配置，6（es2015）— 12（es2021），只表明語法檢測，不表明成員是否可用，成員是否可用經過env環境
3. rules 設置每一個校驗規則的開啓或關閉
4. "off"或0-關閉規則
5. "warn"或1-將該規則做爲警告打開（不影響退出代碼）
6. "error"或2-將規則做爲錯誤打開（觸發時退出代碼爲1）

rules：{
內部的校驗規則：off
}
參考文章

4. globals配置全局成員，新版已經沒了，參考node_modules/eslint-config-standard/eslintrc.json/globals

   jQuery("#abc") // 使用
   
   globals:{
     "jQuery":"readonly" // 配置
   }

   配置註釋

   給校驗的某行添加

   // eslint-disable-line no-template-curly-in-string(禁用的規則)

   配置註釋文檔地址

結合自動化工具

基於gulp項目

安裝:

• yarn add eslint gulp-eslint --dev 安裝eslint
• yarn eslint --init 初始化 .eslintrc配置

• 安裝事後有個報錯
  Error: .eslintrc.js » eslint-config-standard: Environment key "es2021" is unknown

  安裝：yarn add eslint-config-standard@14.1.1 eslint-plugin-standard --dev
  
  .eslintrc.js 中的 env:es2021 改成 env:es2020

  雖然eslint在代碼中顯示了報錯緣由，可是在控制檯中能夠正常運行，並不會報錯。

添加plugins.eslint.format() plugins.eslint.failAfterError() 工做流解決

# gulpfile.js

const script = () => {
  return src('src/assets/scripts/*.js', { base: 'src' })

    .pipe(plugins.eslint())
    .pipe(plugins.eslint.format())  
    .pipe(plugins.eslint.failAfterError()) // 控制檯顯示錯誤

    .pipe(plugins.babel({ presets: ['@babel/preset-env'] }))
    .pipe(dest('temp'))
    .pipe(bs.reload({ stream: true }))

  // yarn add gulp-babel @babel/core @babel/preset-env --dev
}

解決全局變量 $

# eslintrc.js

module.exports = {
  env: {
    browser: true
  },
  extends: [
    'standard'
  ],
  parserOptions: {
    ecmaVersion: 8
  },
  rules: {
  },
  globals: {
    $: 'readonly' // 添加
  }
}

此時再運行就能夠正常運行了

ESlint 結合 Webpack

經過loader進行eslint校驗

步驟

• 在webpack構建的項目中添加eslint-loader yarn add eslint eslint-loader --dev
• 初始化 .eslintrc.js 配置文件 yarn eslint --init

• 修改webpack.config.js

  module: {
    rules: [
      {
        test: /\.js$/,
        use: [
          {
            loader: 'babel-loader',
            options: {
              presets: ['@babel/preset-env']
            }
          },
          'eslint-loader'  // 添加eslint-loader
        ]
      }
    ]
  },

  當咱們在js文件預留一個錯誤時，執行yarn webpack打包後查看控制檯

備註：基於react 添加 eslint-plugin-react

# .eslintrc.js

module.exports = {
  rules:{
    'react/jsx-uses-react':2, // 2就是不校驗
    'react/jsx-uses-vars':2  // App is defined but never-unsed-vars
  },
  plugins:[
    'react' // eslint-plugin-react
  ]
}

現代化開發基於腳手架，添加eslint

• yarn add @vue/cli 安裝
• yarn vue create mc-app 建立vue框架並配置
• yarn serve 運行

eslint 對 ts檢測

• yarn add typescript --dev
• yarn add eslint --dev
• yarn eslint --init

初始化完成後，會自動給配置文件添加parser解析器，解析ts語法

# .eslintrc.js

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

執行yarn eslint ./index.ts 執行某個ts文件

Stylelint

樣式代碼檢查規則

提供了cli工具快速調用，可使用（Sass，Less，PostCss），支持Gulp，Webpack集成

安裝：yarn add stylelint --dev

手動配置: .stylelintrc.js，

校驗css安裝配置模塊：yarn add stylelint-config-standard --dev

# .stylelintrc.js

module.exports={
  extends:"stylelint-config-standard" // 配置繼承模塊
}

執行：yarn stylelint xx.css ，就能夠看到語法校驗報錯了

校驗sass：yarn add stylelint-config-sass-guidelines --dev

# .stylelintrc.js

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

執行：yarn stylelint xx.sass ，就能夠看到stylelint報錯了

Prettier使用

安裝：yarn add prettier --dev
執行：yarn prettier ./文件 --write 會將全部文件格式化

git hooks

代碼在提交至遠程倉庫以前未執行lint工做，經過git hooks在代碼提交前強制lint

git hooks也稱鉤子，每一個鉤子都對應一個任務，經過腳本編寫鉤子任務觸發具體執行內容,查看.git/hooks下鉤子文件

Husky包能夠實現Git Hooks的使用需求,在不編寫shell的前提下使用hooks的功能

安裝：yarn add husky --dev
配置 package.json

"husky":{
  "hooks":{
    "pre-commit":"yarn eslint ./文件名"   // 給.git/hook文件內的 pre-commit鉤子添加執行
  }
}

配置後在提交git commit -m "xx"時會觸發pre-commit鉤子並執行yarn eslint

處理commit時檢查後的代碼配合lint-staged

配置安裝: yarn add lint-staged --dev
配置 package.json

"husky":{
  "hooks":{
    "pre-commit": "yarn lint-staged" // 提交後執行lint-staged內的任務
  }
},
"lint-staged":{
  "*.js":[  // 添加後續任務
    "eslint",
    "git add"
  ]
}