乐趣区

关于前端:使用Lint工具武装你的项目

jiezi

DevUI 是一支兼具设计视角和工程视角的团队，服务于华为云 DevCloud 平台和华为外部数个中后盾零碎，服务于设计师和前端工程师。

官方网站：devui.design

Ng 组件库：ng-devui（欢送 Star）

官网交换：增加 DevUI 小助手（devui-official）

DevUIHelper 插件：DevUIHelper-LSP（欢送 Star）

引言

通过动态查看工具来标准本人我的项目的代码，让团队所有成员保持一致的编码格调，这样大家能够专一于外围个性的开发，晋升整体开发效率。

以下将对 DevUI 组件库应用的各种 lint 工具进行介绍，并阐明如何在代码提交阶段进行对立格局查看与修改。

通过浏览这篇指南，心愿你也能够应用这些 Lint 工具来“武装”本人的我的项目。

DevUI 组件库 lint 一致性次要应用以下工具保障：

  • prettier
  • tslint
  • stylelint
  • commitlint

在开始前，你可在我的项目目录下新建各 lint 配置文件：

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

1 文件根本格局束缚 – prettier

Prettier 的中文意思是“丑陋的、伶俐的”，也是一个风行的代码格式化工具的名称，它可能解析代码，应用你本人设定的规定来从新打印出格局标准的代码。

Prettier 具备以下几个有长处：

  1. 可配置化
  2. 反对多种语言
  3. 集成少数的编辑器
  4. 简洁的配置项

应用 Prettier 在 code review 时不须要再探讨代码款式，节俭了工夫与精力。

装置 prettier：

npm i -D prettier

配置 .prettierrc 文件。

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 钩子，并执行须要的命令操作。

  1. 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"
    ]
  },
...
}
  1. 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 利用编写测试（二）》

《在瀑布下用火焰烤饼：三步法助你疾速定位网站性能问题（超具体）》

退出移动版