tf-lint-config-app
v1.1.15
Published
from [email protected]
Downloads
2
Readme
tf-lint-config-app
用于智能化react技术栈项目的编码语法规范、格式规范检查, 及保存文件时, 根据此规范,编辑器中提示或自动fix或通过prettier进行格式化。
包含四部分:
- js、ts的编码规范、输写规范: eslint的规范, 相关据体规则请查阅"规则文档";
- 样式编码规范: stylelint;
- 格式化处理: prettier;
- git提交时lint检查: husky、lint-staged; (lint验查失败、git提交会被阻止)
安装vscode插件
为了在编辑代码文件时,或保存文件时,能够通过编辑器功能(高亮波浪下划线):
- 提示eslint检验后错误项,并支持在保存时自动修复能修复的,如强制单引、强制缩进;
- 在输入、保存、粘贴时,根据prettier规则自动格式化: 强制单引、强制缩进、是否换行;
播件有:
- ESlint
- Prettier - Code formatter
在项目中进行配置
第一步:安装依赖(在项目根目录终端执行)
npm i tf-lint-config-app --save-dev -S
第二步:项目的package.json加上scripts、husky、lint-staged
{
...
"scripts": {
...
"lint": "npm run lint:js && npm run lint:style",
"lint:js": "eslint --cache --ext .js,.jsx,.ts,.tsx ./src",
"lint:style": "stylelint --fix \"src/**/*.less\" --syntax less",
"prettier": "prettier -c --write \"**/*\"",
"lint:init": "tf-lint-init",
"lint-staged": "lint-staged"
},
"husky": {
"hooks": {
"pre-commit": "npm run lint-staged"
}
},
"lint-staged": {
"**/*.less": "stylelint --syntax less",
"**/*.{js,jsx,ts,tsx}": "npm run lint"
},
...
}
第三步:lint初始化
npm run lint:init
lint初始化,会在项目根目录创建或修改以下文件, 目的是把tf-lint-config-app中的规则应用到当前项目中,.vscode > settings.json中的内容,定义了当前项目,在编辑是、保存时,是否进行eslint修复及prettier自动格式化。
- .vscode
- settings.json //根据当前项目在保存时定义:1)eslint检查,自动修复, 2)是否prettier自动化格式
- .editorconfig //编辑器中新建文件时,会以这个配置定义缩进、charset等
- .eslintignore //不进行eslint检查的文件
- .eslintrc.js //tf-lint-config-app eslint规则的引入, 并且可以在这增加规则项。
- .prettierignore //不进行自动格式化的文件
- .prettierrc.js //tf-lint-config-app prettier规则的引入
- .stylelintrc.js //tf-lint-config-app stylelint规则的引入