前言: 第一章已经演示了怎么创建项目，这一章将讲一下个性化的配置
一、eslint
我配置的eslint有下面的。 各位自行取食。
npm install eslint eslint-config-airbnb eslint-config-prettier eslint-plugin-babel eslint-plugin-compat eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-markdown@1.0.0-beta.6 eslint-plugin-prettier eslint-plugin-react
接下来配置.eslintrc.js文件, 具体文件配置的意思需各位自己去问度娘了
module.exports = {
parser: 'babel-eslint',
extends: ['airbnb', 'prettier', 'plugin:compat/recommended'],
env: {
browser: true,
node: true,
es6: true,
mocha: true,
jest: true,
jasmine: true,
},
globals: {
BUILD_ENV: true,
page: true,
cy: true,
},
rules: {
'react/jsx-filename-extension': [1, { extensions: ['.js'] }],
'react/jsx-wrap-multilines': 0,
'react/prop-types': 0,
'react/forbid-prop-types': 0,
'react/jsx-one-expression-per-line': 0,
'react/destructuring-assignment': 0,
'react/no-string-refs': 0,
'import/no-unresolved': [2, { ignore: ['^@/', '^umi/'] }],
'import/no-extraneous-dependencies': [2, { optionalDependencies: true }],
'import/no-mutable-exports': 0,
'import/prefer-default-export': 0,
'no-underscore-dangle': 0,
'no-unused-expressions': 0,
'jsx-a11y/no-noninteractive-element-interactions': 0,
'jsx-a11y/click-events-have-key-events': 0,
'jsx-a11y/no-static-element-interactions': 0,
'jsx-a11y/anchor-is-valid': 0,
'linebreak-style': 0,
'no-param-reassign': 0,
'no-console': 'off',
'consistent-return': 0,
'import/extensions': 0,
'react/sort-comp': 0,
'import/order': 0,
},
settings: {
polyfills: ['fetch', 'promises', 'url'],
},
};
然后 stylelint
npm install stylelint
打开.stylelinttrc.js
module.exports = {
"extends": ["stylelint-config-standard", "stylelint-config-prettier"],
"rules": {
"no-descending-specificity": null,
"selector-pseudo-class-no-unknown": [
true,
{
"ignorePseudoClasses": ["global"]
}
],
"selector-pseudo-element-colon-notation": "single"
}
};
配置好之后,在install一遍即可
2, 移植到git仓库, 我用的码云, GitHub也一样.
下载git安装 (方法自行百度)
去github 或者 gitlab 或者 码云...等代码管理软件去建一个仓库.拿到仓库地址.比如 https://gitee.com/example/umi_demo.git,
直接在你项目的文件夹右键, 选 git Bash Here
git init // 初始化git仓库
git branch // 查看分支, 当前分支应该是master
git status // 查看状态, 当前应该会提示 在master分支, 还没有commit,
//如果有红色的字体,不用管. 还会提示没有东西添加到commit但是有跟踪到的文件
// 然后
git add . // 这个点和add没挨着
git commit -m "chore: 脚手架新建项目,增加eslint配置" // 后面字符串为提交信息, 便于以后回退代码,查看提交等.
// 然后拿到之前的仓库地址
git remote add origin https://gitee.com/example/umi_demo.git
// 关键的来了, 去清空你的仓库的目标分支, 这里是master, 也可以推
// 到其他分支, 具体操作去百度. 这里去清空master东西.
// 然后 push 即可, 如果原仓库该分支有东西, push会失败.
git push -u origin master
然后git到仓库到此完成.
三、 前端代码风格自动化
既然用了git，那提交代码，当然需要把提交代码也控制一下。风格也必须统一， 便于以后维护项目， 方便管理。
说到风格统一， 那自然是angular的那一套了。至于背景那点小八卦，各位自行百度。
下面正文。
npm install commitizen
npm install cz-customizable
然后在根目录下新建一个文件.commitlintrc.js, 打开输入
module.exports = {
extends: ['@commitlint/config-conventional'],
parserOpts: {
bodyPattern: /[a-zA-Z]{1}[a-zA-Z0-9]-\d*/,
},
/**
* The configuration array contains:
* Level [0..2]: 0 disables the rule. For 1 it will be considered a warning for 2 an error.
* Applicable always|never: never inverts the rule.
* Value: value to use for this rule.
*/
rules: {
'type-enum': [
2,
'always',
['feat', 'fix', 'docs', 'style', 'refactor', 'test', 'revert', 'chore'],
],
'body-max-length': [2, 'always', 72],
'body-min-length': [2, 'always', 5],
},
};
根目录下新建.cz-config.js , 输入
'use strict';
module.exports = {
types: [
{
value: 'feat',
name: '✨ feat: 新增功能',
},
{
value: 'fix',
name: '🐞 fix: 修复 bug',
},
{
value: 'refactor',
name: '🛠 refactor: 代码重构，没有加新功能或者修复 bug',
},
{
value: 'docs',
name: '📚 docs: 仅仅修改了文档，比如 README、CHANGELOG、CONTRIBUTE 等等',
},
{
value: 'test',
name: '🏁 test: 测试用例，包括单元测试、集成测试等',
},
{
value: 'chore',
name: '🗯 chore: 改变构建流程、或者增加依赖库、工具等',
},
{
value: 'style',
name: '💅 style: 仅仅修改了空格、格式缩进、逗好等等，不改变代码逻辑',
},
{
value: 'revert',
name: '⏪ revert: 回滚到上一个版本',
},
],
scopes: ['*', 'config', 'components', 'pages', 'utils', 'styles'],
allowCustomScopes: true,
allowBreakingChanges: ['feat', 'fix'],
};
这只代表我的配置,(不是标准,不是标准,不是标准), 各位可根据官方文档自行修改.
husky继承了Git下所有的钩子，在触发钩子的时候，husky可以阻止不合法的commit,push等等。所以需要下载husky(如果是最新的版本,husky自带了)
注意: 文件夹必须有.git文件,否则无法提交. 该配置无效. 如果操作了上述git的步骤. 文件夹没有.git文件, 可能是隐藏了.取消隐藏即可.
npm install husky --save-dev
安装后再package.json 增加
"husky": {
"hooks": {
"pre-commit": "npm run lint-staged",
"commit-msg": "commitlint -e $GIT_PARAMS"
}
},
"config": {
"commitizen": {
"path": "node_modules/cz-customizable"
}
},
保险起见, npm install 一下
然后
git add .
git cz
如图所示, 即安装成功.
image.png
下一章, 会写关于项目里的一些调整, 方法的一些封装, 约定等.
网友评论