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.js1 文件根本格局束缚 - prettier
Prettier的中文意思是“丑陋的、伶俐的”，也是一个风行的代码格式化工具的名称，它可能解析代码，应用你本人设定的规定来从新打印出格局标准的代码。
Prettier具备以下几个有长处：
- 可配置化
- 反对多种语言
- 集成少数的编辑器
- 简洁的配置项
应用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 huskylint-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利用编写测试（二）》
《在瀑布下用火焰烤饼：三步法助你疾速定位网站性能问题（超具体）》