使用Lint工具「武裝」你的項目

時間 2021-04-16

標籤 css html 前端 node git github typescript express npm json 欄目 CSS 简体版

原文原文鏈接

DevUI是一支兼具設計視角和工程視角的團隊，服務於華爲雲 DevCloud平臺和華爲內部數箇中後臺系統，服務於設計師和前端工程師。

官方網站： devui.design

Ng組件庫： ng-devui（歡迎Star）

官方交流：添加DevUI小助手（devui-official）

DevUIHelper插件：DevUIHelper-LSP（歡迎Star）

引言

經過靜態檢查工具來規範本身項目的代碼，讓團隊全部成員保持一致的編碼風格，這樣你們能夠專一於核心特性的開發，提高總體開發效率。css

如下將對DevUI組件庫使用的各類lint工具進行介紹，並說明如何在代碼提交階段進行統一格式檢查與修正。html

經過閱讀這篇指南，但願你也可使用這些Lint工具來「武裝」本身的項目。前端

DevUI組件庫lint一致性主要使用如下工具保證：node

prettier
tslint
stylelint
commitlint

在開始前，你可在項目目錄下新建各lint配置文件：git

/YourProject
├── ...
├── .prettierrc
├── tslint.json
├── .stylelintrc.json
├── .vscode
|  ├── extensions.json
|  └── settings.json
└── commitlint.config.js

1 文件基本格式約束 - prettier

Prettier的中文意思是「漂亮的、機靈的」，也是一個流行的代碼格式化工具的名稱，它可以解析代碼，使用你本身設定的規則來從新打印出格式規範的代碼。github

Prettier具備如下幾個有優勢：typescript

可配置化
支持多種語言
集成多數的編輯器
簡潔的配置項

使用Prettier在code review時不須要再討論代碼樣式，節省了時間與精力。express

安裝prettier：npm

npm i -D prettier

配置.prettierrc文件。json

prettier配置參考

// 註釋爲對對應規則註釋，複製到項目中可刪除
{
  "tabWidth": 2, // 設定每一個縮進爲2個空格
  "semi": true, // 在語句末尾添加分號
  "singleQuote": true, // 使用單引號
  "jsxSingleQuote": true,
  "bracketSpacing": true, // 在括號間打印空格
  "jsxBracketSameLine": true, // 把多行'>'放在最後一行的末尾，而不是另起一行放置
  "printWidth":140, // 行長超過140將會換行
  "endOfLine": "auto",
  "proseWrap": "preserve",
  "trailingComma": "es5",
  "useTabs": false
}

2 TS格式約束 — tslint

TSLint 是一個開源 TypeScript 代碼風格檢查器，它可以在可讀性、可維護性、代碼正確性等方面爲開發者提供幫助。TSLint 被普遍用於各類前端構建工具和編輯器中。

在編寫代碼時，編譯器會根據 TSLint 拋出高亮提示，在代碼編譯時，編譯工具能夠運行 TSLint 而後及時拋出錯誤阻斷編譯的繼續，防止不符合規範的代碼進入生產環境。

安裝tslint：

npm i -D tslint codelyzer

配置tslint.json文件。

tslint配置參考

{
  "rulesDirectory": [
    "node_modules/codelyzer"
  ],
  "rules": {
    "arrow-return-shorthand": true, // 將()=>{return x}轉換爲()=>x
    "callable-types": true, // 能夠將僅帶有調用簽名的接口或文字類型編寫爲函數類型
    "class-name": true, // 強制使用PascalCased類和接口名稱
    "comment-format": [
      true,
      "check-space"
    ],           // 單行的評論前必須有一個空格
    "curly": true,  // 對於if/for/do/while語句強制須要花括號
    "deprecation": {
      "severity": "warn"
    },           // 使用了不推薦的APIs時發出警告
    "eofline": true, // 文件已換行符結尾
    "forin": true,  // 使用for..in語句過濾if語句
    "import-blacklist": [
      true,
      "rxjs/Rx"
    ],        // 導入黑名單，禁止直接導入rxjs/Rx，僅需導入所需的子模塊
    "import-spacing": true, // import 的關鍵字之間添加空格
    "indent": [
      true,
      "spaces"
    ],       // 使用空格強制縮進
    "interface-over-type-literal": true, // 使用接口定義而不是(type T = { ... })
    "label-position": true, // 只容許將label放在合適的位置
    "max-line-length": [
      true,
      140
    ],              // 行長超過140以後換行
    "member-access": false, // 不須要類成員的顯式可見性聲明
    "member-ordering": [   // 對類成員的排序，使類更容易閱讀、導航和編輯
      true,
      {
        "order": [
          "static-field",
          "instance-field",
          "static-method",
          "instance-method"
        ]
      }
    ],
    "no-arg": true, // 不容許使用arguments.callee
    "no-bitwise": true, // 不容許使用位運算符
    "no-console": [
      true,
      "debug",
      "info",
      "time",
      "timeEnd",
      "trace"
    ],          // 列出不容許使用的console方法
    "no-construct": true, // 不容許使用String，Number,Boolean構造函數
    "no-debugger": true, // 不容許使用debugger語句
    "no-duplicate-super": true, // super在一個構造函數中出現兩次則發出警告
    "no-empty": false, // 容許使用空代碼塊
    "no-empty-interface": true, // 不容許使用空接口
    "no-eval": true,  // 不容許使用eval函數
    "no-inferrable-types": [
      true,
      "ignore-params"
    ], // 不容許對初始化爲數字，字符串或布爾值的變量或參數進行顯式類型聲明,容許爲函數參數指定不可推斷的類型註釋
    "no-misused-new": true, // 爲接口或new類定義構造函數時發出警告
    "no-non-null-assertion": true,// 不容許使用!後綴運算符進行非null斷言
    "no-redundant-jsdoc": true, // 禁止JSDoc複製TypeScript功能
    "no-shadowed-variable": true, // 禁止陰影變量聲明
    "no-string-literal": false, // 容許使用obj["property"]方式獲取對象屬性
    "no-string-throw": true,  // 不容許直接throw字符串
    "no-switch-case-fall-through": true, // 不容許case語句降低
    "no-trailing-whitespace": true, // 不容許行尾尾隨空格
    "no-unnecessary-initializer": true, // 不容許使用let時初始化值爲undefined
    "no-unused-expression": true, // 不容許出現未使用的表達式
    "no-use-before-declare": true, // 不容許使用未聲明的變量
    "no-var-keyword": true, // 不容許使用var關鍵字
    "object-literal-sort-keys": false, // 不對對象中的屬性關鍵字排序
    "one-line": [
      true,
      "check-open-brace",
      "check-catch",
      "check-else",
      "check-whitespace"
    ],  // 要求指定的標記與它們以前的表達式位於同一行
    "prefer-const": true, // 儘可能使用const而不是let
    "quotemark": [
      true,
      "single"
    ], // 強制字符串使用單引號
    "radix": true, // 使用parseInt時須要制定radix參數
    "semicolon": [
      true,
      "always"
    ],  // 句尾使用分號
    "triple-equals": [
      true,
      "allow-null-check"
    ], // 使用'==='和'!=='作判斷，容許使用'=='和'!='判斷null
    "typedef-whitespace": [
      true,
      {
        "call-signature": "nospace",
        "index-signature": "nospace",
        "parameter": "nospace",
        "property-declaration": "nospace",
        "variable-declaration": "nospace"
      }
    ], // 不容許爲上述列出的類型定義使用空格
    "unified-signatures": true, // 當兩個函數可使用rest等方法合併時，發出警告
    "variable-name": false, // 不檢查變量命名格式
    "whitespace": [
      true,
      "check-branch",
      "check-decl",
      "check-operator",
      "check-separator",
      "check-type",
      "check-module",
      "check-type-operator"
    ], // 設置空格的風格
    "no-output-on-prefix": true, // 命名事件不帶前綴
    "use-input-property-decorator": true, 
    "use-output-property-decorator": true,
    "use-host-property-decorator": true, // 使用@HostProperty裝飾器而不是@Component和@Directive元數據的host屬性
    "no-input-rename": true, // 經過提供字符串給裝飾器禁止重命名指令輸入
    "no-output-rename": true,// 經過提供字符串給裝飾器禁止重命名指令輸出
    "use-life-cycle-interface": true, // 確保implement生命週期接口以後再使用
    "use-pipe-transform-interface": true,// 確保使用@Pipe裝飾器實現PipeTransform接口
    "component-class-suffix": true,// 用@Component裝飾的類必須帶有Component後綴
    "directive-class-suffix": true // 用@Directive裝飾的類必須帶有Directive後綴
  }
}

3 css/scss格式約束 - stylelint

stylelint 是一個強大和現代的 CSS 審查工具，有助於開發者推行統一的代碼規範，避免樣式錯誤。

stylelint 由 PostCSS 提供技術支持，因此它也能夠理解 PostCSS 解析的語法，好比 SCSS。

安裝stylelint：

npm i -D stylelint stylelint-config-recommended-scss stylelint-config-standard

配置.stylelintrc.json。

stylelint-config-standard規則參考

stylelint-config-recommended規則參考

{
  "extends": ["stylelint-config-standard", "stylelint-config-recommended-scss"],
  "plugins": ["stylelint-scss"],
  "rules": {
    "string-quotes": "single",
    "property-no-unknown": true,
    "selector-pseudo-class-no-unknown": true,
    "at-rule-empty-line-before": [
      "always",
      {
        "except": ["blockless-after-same-name-blockless", "first-nested", "inside-block"],
        "ignore": ["after-comment", "first-nested"]
      }
    ],
    "rule-empty-line-before": [
      "always",
      {
        "except": ["after-single-line-comment", "first-nested"]
      }
    ],
    "block-no-empty": true,
    "selector-pseudo-element-no-unknown": [
      true,
      {
        "ignorePseudoElements": ["ng-deep"]
      }
    ],
    "selector-type-no-unknown": [
      true,
      {
        "ignoreTypes": ["/^d-/"]
      }
    ],
    "color-hex-length": "long",
    "no-descending-specificity": null,
    "font-family-no-missing-generic-family-keyword": null,
    "no-duplicate-selectors": null,
    "declaration-block-no-duplicate-properties": [
      true,
      {
        "ignore": ["consecutive-duplicates"]
      }
    ]
  }
}

4 git message約束 - commitlint

和 Tslint 同樣的是，commitlint 自身只提供了檢測的功能和一些最基礎的規則。使用者須要根據這些規則配置出本身的規範。

對於 Conventional Commits 規範，社區已經整理好了 @commitlint/config-conventional 包，咱們只須要安裝並啓用它就能夠了。

安裝commitlint：

npm i -D @commitlint/cli @commitlint/config-conventional

配置commitlint.config.js：

const types = ['feat', 'fix', 'docs', 'style', 'refactor', 'perf', 'test', 'build', 'release', 'chore', 'revert'];

module.exports = {
  extends: ['@commitlint/config-conventional'],
  rules: {
    'type-empty': [2, 'never'],
    'type-enum': [2, 'always', types],
    'scope-case': [0, 'always'],
    'subject-empty': [2, 'never'],
    'subject-case': [0, 'never'],
    'header-max-length': [2, 'always', 88],
  },
};

配置以上lint後，便可對提交message進行約束。

message格式參考

5 配置npm script

咱們若要進行修正格式命令配置，則需在package.json中配置對應命令。

package.json 對scripts：

{
 ...
 "scripts": {
    ...
    "lint:devui": "tslint -p devui/tsconfig.lint.json -c devui/tslint.json \"devui/**/*.ts\"",
    "lint:devui:fix": "tslint --fix -p devui/tsconfig.lint.json -c devui/tslint.json \"devui/**/*.ts\"",
    "prettier": "prettier --config ./.prettierrc --write \"{devui,src}/**/*.html\"",
    "stylelint": "stylelint \"{devui,src}/**/*.{scss,css}\"  --fix",
    ...
  },
 ...
 }

配置後便可使用如npm run lint:devui進行文件lint自動修正。

6 配置git 提交代碼自動修正

咱們要在git提交階段對暫存區代碼進行自動修正，能夠經過配置git 鉤子關聯（可參考Git 鉤子），首先咱們須要安裝：

npm i -D lint-staged husky

lint-staged可使咱們在暫存區上運行lint命令，僅對須要提交的內容進行格式化操做。

husky可讓咱們關聯git鉤子，並執行須要的命令操做。

package.json中添加lint-staged項：

{
...
"lint-staged": {
    "devui/**/*.ts": [
      "tslint --fix -p devui/tsconfig.lint.json -c devui/tslint.json \"*.ts\"",
      "git add"
    ],
    "src/**/*.ts": [
      "tslint --fix  -c src/tslint.json \"*.ts\"",
      "git add"
    ],
    "{devui,src}/**/*.html": [
      "prettier --config ./.prettierrc --write",
      "git add"
    ],
    "{devui,src}/**/*.{scss,css}": [
      "stylelint --fix",
      "git add"
    ]
  },
...
}

package.json中husky添加lint-staged關聯：

{
...
"husky": {
    "hooks": {
      "commit-msg": "commitlint -E HUSKY_GIT_PARAMS && node ./scripts/commit-lint/commit-lint.js HUSKY_GIT_PARAMS",
      "pre-commit": "lint-staged"
     }
  },
...
}

以上配置完成，便可在git代碼提交階段對.ts等文件進行自動格式修正與錯誤攔截。

7 爲VSCode進行項目統一配置

VSCode提供了對項目進行統一設置能力，只需在.vscode目錄下書寫對應配置項便可。

配置.vscode/extensions.json，設置統一插件：

{
    // See https://go.microsoft.com/fwlink/?LinkId=827846 to learn about workspace recommendations.
    // Extension identifier format: ${publisher}.${name}. Example: vscode.csharp
    // List of extensions which should be recommended for users of this workspace.
    "recommendations": [
        /*使用最新版VSCODE，打開項目後右下角有提示安裝全部插件，左側插件欄目有列出工做空間插件*/
        /*Angular開發神器*/
        "angular.ng-template",
        /*Angular,typescript, html等語法填充*/
        "mikael.angular-beastcode",
        /*DevUI組件庫懸停提示，自動補全插件*/
        "sspkudevui.devuihelper",
        /*檢查代碼中的單詞拼寫是否有誤*/
        "streetsidesoftware.code-spell-checker",
        /*ts靜態檢查*/
        "ms-vscode.vscode-typescript-tslint-plugin",
        /*style靜態檢查，初期暫不要求*/
        "stuartzhang.stylelint-stzhang",
        /*彩色括號配對*/
        "coenraads.bracket-pair-colorizer-2",
        /*代碼中出現git修改記錄*/
        "eamodio.gitlens",
        /*markdown檢查*/
        "davidanson.vscode-markdownlint",
        /*重複代碼檢測*/
        "paulhoughton.vscode-jscpd",
        /*中文包*/
        "ms-ceintl.vscode-language-pack-zh-hans"
    ],
    // List of extensions recommended by VS Code that should not be recommended for users of this workspace.
    "unwantedRecommendations": []
}

配置.vscode/settings.json，配置當前項目設置：

{
    "jscpd.files":"devui/*/*",
    "editor.codeActionsOnSave": {
        "source.organizeImports": true  // 對各import進行格式化
    }
}

小結

本文介紹了ng-devui組件庫如何進行項目lint格式約束，介紹了當前使用的各lint工具，以及如何經過關聯，設置git提交門禁與格式自動修復。

更多地，若是你使用VSCode，提供了對項目進行VSCode進行統一配置參考。

經過本文中提供方法與步驟，便可讓你的項目具有lint一致性約束能力。

注：

本文中說起的TSLint工具已中止更新，當前更加建議使用ESLint，ng-devui也已在進行切換。
ng-devui package.json 完整參考：https://github.com/DevCloudFE/ng-devui/blob/master/package.json。

加入咱們

咱們是DevUI團隊，歡迎來這裏和咱們一塊兒打造優雅高效的人機設計/研發體系。招聘郵箱：muyang2@huawei.com。

文/DevUI 砰砰砰砰

往期文章推薦

《跟着華爲DevUI開源組件庫學寫單元測試用例》

《如今開始爲你的Angular應用編寫測試（二）》

《在瀑布下用火焰烤餅：三步法助你快速定位網站性能問題（超詳細）》

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。