目标
工程配置次要是为了可能在团队开发中对立代码标准,防止因为代码格调不对立或其它不统一的问题导致的整合抵触
- 编辑器格调(EditorConfig、prettier)
- 代码标准和校验(eslint、stylint)
- git 提交标准(commitlint)
参考文章:我是这样搭建 Typescript+React 我的项目环境的
vscode 必备插件
- gitignore
- EditorConfig For vs Code
- Prettier – Code formatter
- ESLint
- stylelint
package.json
初始化package.json
:
npm init -y
.gitignore
ctrl+shift+p 号召命令面板,输出 Add gitignore 命令,新建 .gitignore
或者间接新建:
touch .gitignore
.npmrc
对立 npm
依赖源
# 创立 .npmrc 文件
touch .npmrc
# 在该文件内输出配置
registry=https://registry.npm.taobao.org/
因为我的项目中会用到 react
和typescript
,所以先装上这两个依赖包:
npm install typescript -D
npm install react react-dom -S
README.md
新建 README
文件
touch README.md
EditorConfig
.editorconfig
是跨编辑器保护统一编码格调的配置文件
vscode
装置插件EditorConfig
,根目录新建文件.editorconfig
:
touch .editorconfig
输出以下配置:
root = true
[*]
indent_style = tab
indent_size = 2
charset = utf-8
trim_trailing_whitespace = true
insert_final_newline = true
end_of_line = lf
[*.md]
trim_trailing_whitespace = false
indent_style
缩进格调,可选配置有 tab 和 spaceindent_size
缩进大小charset
编码格局trim_trailing_whitespace
去除多余的空格insert_final_newline
在尾部插入一行end_of_line
换行符
更多配置能够查看 EditorConfig
Prettier
Prettier
对立我的项目格调
prettier 依赖包
npm install prettier -D
根目录新建文件.prettierrc
:
touch .prettierrc
输出以下配置:
{
"trailingComma": "none",
"tabWidth": 2,
"semi": true,
"endOfLine": "lf",
"printWidth": 120,
"bracketSpacing": true,
"arrowParens": "always"
}
trailingComma
对象的最初一个属性开端增加,
tabWidth
缩进大小semi
开端是否增加分号singleQuote
是否单引号jsxSingleQuote
jsx 语法是否单引号endOfLine
与 .editorconfig 保持一致设置printWidth
单行代码最长字符长度,超过之后会主动格式化换行bracketSpacing
花括号外面有空格{a:1}
=>{a: 1}
arrowParens
箭头函数的参数括号包裹(a)=>{}
更多配置请查看 Prettier Playground
prettier 插件
vscode 装置扩大 Prettier – Code formatter
根目录下新建文件夹.vscode
,再此文件夹下新建settings.json
:
mkdir .vscode
touch .vscode/settings.json
该文件的配置优先于 vscode 全局的
settings.json
,不过要在工作区workspace
的根目录下才会失效。
settings.json
配置:
{
// 指定哪些文件不参加搜寻
"search.exclude": {
"**/node_modules": true,
"dist": true,
"build": true,
"yarn.lock": true,
"package-lock.json": true
},
"editor.formatOnSave": true,
"": {"editor.defaultFormatter":"esbenp.prettier-vscode"},"[javascriptreact]": {"editor.defaultFormatter":"esbenp.prettier-vscode"},"[typescript]": {"editor.defaultFormatter":"esbenp.prettier-vscode"},"[typescriptreact]": {"editor.defaultFormatter":"esbenp.prettier-vscode"},"[json]": {"editor.defaultFormatter":"esbenp.prettier-vscode"},"": {"editor.defaultFormatter": "esbenp.prettier-vscode"},
"[markdown]": {"editor.defaultFormatter": "esbenp.prettier-vscode"},
"": {"editor.defaultFormatter":"esbenp.prettier-vscode"},"[less]": {"editor.defaultFormatter":"esbenp.prettier-vscode"},"[scss]": {"editor.defaultFormatter":"esbenp.prettier-vscode"}
}
ESLint
装置 eslint
npm install eslint -D
装置胜利后,执行以下命令:
npx eslint --init
//termail
1、How would you like to use ESLint?
= To check syntax, find problems, and enforce code style
2、What type of modules does your project use?
= JavaScript modules (import/export)
3、Which framework does your project use?
= React
4、Does your project use TypeScript?
= Typescript
5、Where does your code run?
= Browser & Node
6、How would you like to define a style for your project?
= Use a popular style guide
7、Which style guide do you want to follow?
= Airbnb
8、What format do you want your config file to be in?
= JavaScript
9、Would you like to install them now with npm?
= Yes
对生成的 .eslintrc.js
文件,还要做以下批改:
- 依据 eslint-config-airbnb 官网阐明,如果要开启 React Hooks 的查看,须要在 extends 中增加一项
'airbnb/hooks'
。 - 依据 @typescript-eslint/eslint-plugin 官网阐明,在 extends 中增加
'plugin:@typescript-eslint/recommended'
可开启针对 ts 语法举荐的规定定义。 - 须要增加一条很重要的
rule
,不然在typescript
中通过import
导入会报错
增加以下规定到 rules
:
rules: {
'import/extensions': [
ERROR,
'ignorePackages',
{
ts: 'never',
tsx: 'never',
json: 'never',
js: 'never',
},
],
}
增加 settings
配置:
settings: {
'import/resolver': {
node: {extensions: ['.tsx', '.ts', '.js', '.json'],
},
},
},
ESLint 和 Prettier 的抵触
配置完会发现,
vscode
始终在标红,因为eslint
的配置规定跟prettier
抵触了
装置 eslint-config-prettier
:
npm install eslint-config-prettier -D
增加以下配置到 .eslintrc.js
的 extends
中:
{
extends: [
// other configs ...
'prettier',
'prettier/@typescript-eslint',
'prettier/react',
'prettier/unicorn',
]
}
eslint 扩大插件
eslint-plugin-promise
让你把 Promise 语法写成最佳实际eslint-plugin-unicorn
提供了更多有用的配置项
npm install eslint-plugin-promise eslint-plugin-unicorn -D
批改 .eslintrc.js
文件如下:
const OFF = 0;
const WARN = 1;
const ERROR = 2;
module.exports = {
env: {
browser: true,
es2020: true,
node: true
},
extends: [
'airbnb',
'airbnb/hooks',
'plugin:react/recommended',
'plugin:unicorn/recommended',
'plugin:promise/recommended',
'plugin:@typescript-eslint/recommended',
'prettier',
'prettier/@typescript-eslint',
'prettier/react',
'prettier/unicorn'
],
parser: '@typescript-eslint/parser',
parserOptions: {
ecmaFeatures: {jsx: true},
ecmaVersion: 11,
sourceType: 'module'
},
plugins: ['react', 'unicorn', 'promise', '@typescript-eslint'],
settings: {
'import/resolver': {
node: {extensions: ['.tsx', '.ts', '.js', '.json']
},
typescript: {}}
},
rules: {
'import/extensions': [
ERROR,
'ignorePackages',
{
ts: 'never',
tsx: 'never',
js: 'never'
}
],
'import/no-extraneous-dependencies': [ERROR, { devDependencies: true}],
'import/prefer-default-export': OFF,
'import/no-unresolved': ERROR,
'unicorn/better-regex': ERROR,
'unicorn/prevent-abbreviations': OFF,
'unicorn/filename-case': [
ERROR,
{
cases: {
// 中划线
kebabCase: true,
// 小驼峰
camelCase: true,
// 下划线
snakeCase: false,
// 大驼峰
pascalCase: true
}
}
],
'unicorn/no-array-instanceof': WARN,
'unicorn/no-for-loop': WARN, // 应用 for of 和 .entries 代替传统的 for 循环
'unicorn/prefer-add-event-listener': [
ERROR,
{excludedPackages: ['koa', 'sax']
}
],
'unicorn/prefer-query-selector': ERROR,
'unicorn/no-null': OFF,
'unicorn/import-style': OFF,
'@typescript-eslint/no-useless-constructor': ERROR,
'@typescript-eslint/no-empty-function': WARN,
'@typescript-eslint/no-var-requires': OFF,
'@typescript-eslint/explicit-function-return-type': OFF,
'@typescript-eslint/explicit-module-boundary-types': OFF,
'@typescript-eslint/no-explicit-any': OFF,
'@typescript-eslint/no-unused-vars': [OFF],
'react/jsx-filename-extension': [ERROR, { extensions: ['.tsx', 'ts', '.jsx', 'js'] }],
'react/jsx-indent-props': [ERROR, 'tab'],
'react/jsx-indent': [ERROR, 'tab'],
'react/jsx-one-expression-per-line': OFF,
'react/destructuring-assignment': OFF,
'react/state-in-constructor': OFF,
'react/jsx-props-no-spreading': OFF,
'react/prefer-stateless-function': OFF,
'jsx-a11y/click-events-have-key-events': OFF,
'jsx-a11y/no-noninteractive-element-interactions': OFF,
'lines-between-class-members': [ERROR, 'always'],
indent: [ERROR, 'tab', { SwitchCase: 1}],
'linebreak-style': [ERROR, 'unix'],
semi: [ERROR, 'always'],
'no-unused-expressions': WARN,
'no-plusplus': OFF,
'no-console': OFF,
'no-unused-vars': OFF,
'no-use-before-define': OFF,
'class-methods-use-this': ERROR,
'global-require': OFF
}
};
eslint vscode 配置
ESLint 插件能够提供编辑器主动修复性能
装置实现增加配置到 .vscode/settings.json
:
"eslint.validate": ["javascript", "javascriptreact", "typescript", "typescriptreact"],
"typescript.tsdk": "./node_modules/typescript/lib", // 代替 vscode 的 ts 语法智能提醒
"editor.codeActionsOnSave": {"source.fixAll.eslint": true,},
.eslintignore 和 .prettierignore
新建 .eslintignore
和 .prettierignore
:
touch .eslintignore .prettierignore
输出以下内容:
/node_modules
/build
/dist
StyleLint
接下来对立款式格调,装置两个的依赖包包:
npm install stylelint stylelint-config-standard -D
我的项目根目录新建 .stylelintrc.js
文件:
touch .stylelintrc.js
输出以下内容:
module.exports = {extends: ['stylelint-config-standard'],
rules: {
'comment-empty-line-before': null,
'declaration-empty-line-before': null,
'function-name-case': 'lower',
'no-descending-specificity': null,
'no-invalid-double-slash-comments': null,
'rule-empty-line-before': 'always',
},
ignoreFiles: ['node_modules/**/*', 'build/**/*'],
}
extends
预设规定扩大rules
具体的规定ignoreFiles
疏忽配置字段
vscode
同步配套插件 stylelint
.vscode/settings.json
中新增以下代码:
{
// 应用 stylelint 本身的校验即可
"css.validate": false,
"less.validate": false,
"scss.validate": false,
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true,
"source.fixAll.stylelint": true
},
}
stylelint extends 和 stylelint plugins
- stylelint-config-rational-order 对关联属性进行分组和排序
- stylelint-declaration-block-no-ignored-properties 矛盾款式疏忽
npm install stylelint-order stylelint-config-rational-order stylelint-declaration-block-no-ignored-properties -D
批改配置文件如下:
module.exports = {extends: ['stylelint-config-standard', 'stylelint-config-rational-order'],
plugins: ['stylelint-order', 'stylelint-declaration-block-no-ignored-properties'],
rules: {
'plugin/declaration-block-no-ignored-properties': true,
'comment-empty-line-before': null,
'declaration-empty-line-before': null,
'function-name-case': 'lower',
'no-descending-specificity': null,
'no-invalid-double-slash-comments': null,
'rule-empty-line-before': 'always'
},
ignoreFiles: ['node_modules/**/*', 'build/**/*', 'dist/**/*']
};
解决 Stylelint 和 Prettier 的抵触
装置 stylelint-config-prettier
:
npm install stylelint-config-prettier -D
增加以下配置到 .stylelintrc.js 的 extends 中:
{
extends: [
// other configs ...
'stylelint-config-prettier'
]
}
lint 命令
咱们在 package.json 的 scripts 中减少以下三个配置:
"scripts": {
"lint": "npm run lint-eslint && npm run lint-stylelint",
"lint-eslint": "eslint -c .eslintrc.js --ext .ts,.tsx,.js src",
"lint-stylelint": "stylelint --config .stylelintrc.js src/**/*.{less,css,scss}"
},
lint-staged
只针对 git 缓存区最新改变过的文件进行 格式化 和 lint 规定校验
husky
husky
能够提供一些钩子,比方执行 git commit
之前的钩子 pre-commit
,借助这个钩子咱们就能执行 lint-staged
所提供的代码文件格式化及 lint
规定校验。
如果我的项目开始前没有初始化的 .git
文件,要先初始化 git,否则 husky
会装置失败:
git init
装置 lint-staged
和 husky
:
npm install husky lint-staged -D
在 package.json
中增加以下代码:
{
"husky": {
"hooks": {"pre-commit": "lint-staged",}
},
"lint-staged": {"*.{ts,tsx,js}": ["eslint --config .eslintrc.js"],
"*.{css,less,scss}": ["stylelint --config .stylelintrc.js"],
"*.{ts,tsx,js,json,html,yml,css,less,scss,md}": ["prettier --write"]
},
}
commitlint + changelog
在多人合作的我的项目中,如果 git 的提交阐明精准,在前期合作以及 bug 解决时会变得有据可查,我的项目的开发能够依据标准的提交阐明疾速生成开发日志,从而不便开发者或用户追踪我的项目的开发信息和性能个性。
倡议浏览 Commit message 和 Change log 编写指南(阮一峰)
commitlint
能够帮忙咱们在 git commit
时校验 message
格局是否符合规范,conventional-changelog
能够帮忙咱们疾速生成 changelog
commitizen 能够在命令行中进行可视化的 git commit 操作,这里不作配置
装置 commitlint
相干依赖:
npm install @commitlint/cli @commitlint/config-conventional -D
@commitlint/config-conventional 相似 eslint
配置文件中的 extends
,它是官网举荐的 angular 格调的 commitlint
配置,提供了大量的 lint 规定
根目录新建文件 .commitlintrc.js
:
touch .commitlintrc.js
写入以下代码:
/**
* build : 扭转了 build 工具 如 webpack
* ci : 继续集成新增
* chore : 构建过程或辅助工具的变动
* feat : 新性能
* docs : 文档扭转
* fix : 修复 bug
* perf : 性能优化
* refactor : 某个已有性能重构
* revert : 撤销上一次的 commit
* style : 代码格局扭转
* test : 减少测试
* anno: 减少正文
*/
module.exports = {extends: ['@commitlint/config-conventional'],
rules: {
'type-enum': [
2,
'always',
['build', 'ci', 'chore', 'docs', 'feat', 'fix', 'perf', 'refactor', 'revert', 'style', 'test', 'anno'],
],
},
};
package.json
的 husky
配置,减少一个钩子:
{
"husky": {
"hooks": {
"pre-commit": "lint-staged",
"commit-msg": "commitlint --config .commitlintrc.js -E HUSKY_GIT_PARAMS"
}
},
}
-E HUSKY_GIT_PARAMS
简略了解就是会拿到咱们的 message,而后 commitlint 再去进行 lint 校验。
装置依赖changelog
:
npm install conventional-changelog-cli -D
在 package.json 的 scripts 下减少一个命令:
{
"scripts": {"changelog": "conventional-changelog -p angular -i CHANGELOG.md -s",},
}
之后就能够通过 npm run changelog
生成 angular 格调的 changelog
,须要留神的是,下面这条命令产生的 changelog
是基于上次 tag 版本之后的变更(feat
、fix
等等)所产生
测试:
# 提交所有变动到缓存区
git add -A
# 把暂存区的所有批改提交到分支
git commit -m "chore: add commitlint to force commit style"
git push origin master