background
In daily development, projects are basically developed and maintained by multiple people. Everyone has different code writing habits and styles, and the commit information is messy, which adds a lot of difficulties to future development and maintenance. Therefore, under the collaboration of multiple people, the specification and constraints of the code are extremely important. The best way is to lay the foundation of the project from the early stage of the project and define the coding and engineering specifications of the project. The previous solution was to deploy Eslint + Prettier + Husky + Commitlint + Lint-staged respectively. If this set of solutions is deployed one by one, a lot of configuration files will be written, which is extremely energy-consuming.
F2ELint is a supporting Lint tool for "Alibaba Front-End Protocol", which can access the protocol, scan and repair protocol problems with one click for the project, and ensure the coding standard and code quality of the project. The project mainly includes two parts: "statute document" and "supporting tools". At present, only the "supporting tools" part is open, and supporting tools such as F2ELint can be used to implement project specifications.
The following explains how to access f2elint for the project.
f2elint install
After defining the project-related information, install f2elint
npm install f2elint -g
The installation process will select the language, framework, and lint information related to this project. My project currently uses the Vue framework and does not require MarkdownLint, so choose styleLint and Prettier to format the code (Eslint and Commitlint are the default). You can choose according to the actual situation of your project.
After the installation is complete, execute f2elint -h to verify that the installation was successful.
One-click access protocol
Execute f2elint init in the root directory of the project to access the protocol with one click, and install the dependencies and configurations required by Lint for the project.
f2elint init
init will specifically do the following:
-
Install various dependencies: including Linter dependencies, such as ESLint, stylelint, commitlint, markdownlint, etc.; configuration dependencies, such as eslint-config-ali, stylelint-config-ali, commitlint-config-ali, markdownlint-config-ali, etc.
-
Write various configuration files, including:
| file name | Function |
|---|---|
| .eslintrc.js、.eslintignore | ESLint configuration (inheriting eslint-config-ali) and blacklist files |
| .stylelintrc.js、.stylelintignore | stylelint configuration (inherited from stylelint-config-ali) and blacklist files |
| commitlint.config.js | commitlint configuration (inherited from commitlint-config-ali) |
| .markdownlint.json、.markdownlintignore | markdownlint configuration and blacklist files |
| .prettierrc.js | Prettier configuration conforming to the specification |
| .editorconfig | conforming editorconfig |
| .vscode/extensions.json | VSCode plug-in recommendations related to writing specifications, including ESLint, stylelint, markdownlint, prettier, etc. |
| .vscode/settings.json | Write the protocol-related VSCode settings, set the validate of ESLint and stylelint plug-ins, and automatically run fix when saving. If you choose to use Prettier, you will also set the prettier-vscode plug-in as the defaultFormatter of each front-end language, and configure automatic formatting when saving |
- Configure the git commit checkpoint: use husky to set the code submission checkpoint, and run f2elint commit-file-scan and f2elint commit-msg-scan when git commit to check the specification of the submitted file and submitted information respectively. By default, f2elint commit-file-scan only checks for error issues. If you want to also check for warn issues, you can add the --strict parameter to enable strict mode
vscode install eslint, stylelint, prettierrc
Install eslint, styleint and prettierrc three plugins in vscode.
After installation, no configuration is required, the plugin will automatically find configuration files such as .eslintrc.js, .stylelintrc.js, .prettierrc.js, etc. in the project. So far, you can use [Alibaba Front-end Protocol] to standardize your own projects up.
One-key scan
Execute the f2elint scan command in the root directory of the project to scan the specification issues of the project.
The following parameters are supported:
- -q --quiet only report error level problems
- -o --output-report output scanned specification problem log
- -i --include specifies the directory to be scanned
- --no-ignore ignore eslint ignore configuration files and ignore rules
One-key repair
Execute the f2elint fix command in the root directory of the project to fix some protocol issues.
The following parameters are supported:
- -i --include specifies the directory to scan for repair
- --no-ignore Ignore eslint's ignore configuration file and ignore rules
Note that please review the code before and after the repair, so as to prevent the tool from being repaired by mistake.
f2elint commit-file-scan commit file scan
When git commit, scan the submitted files for specification issues, and need to cooperate with git's pre-commit hook.
The following parameters are supported:
- -s --strict Strict mode, both warning and error problems are blocked, and the default is only for error problems
f2elint commit-msg-scan Commit message scan
When git commits, scan the format of the commit message (using commitlint), which needs to be used in conjunction with husky's commit-msg hook
Supplement: Git Commit specification
<type>(<scope>): <subject>
type: used to describe the category of commit, only the following 8 logos are allowed.
- feat: new function (feature)
- fix: fix bugs
- docs: documentation
- style: format (changes that do not affect code operation)
- refactor: refactoring (that is, not a new feature, nor a code change to modify a bug)
- test: add test
- chore: changes to the build process or auxiliary tools
- build: local creator build
scope: It is used to describe the scope of commit influence, such as data layer, control layer, view layer, etc., depending on the project.
subject is a short description of the purpose of the commit, no more than 50 characters. Generally, there are the following regulations:
- Start with a verb and use the first-person present tense, such as change, not changed or changes
- first letter lowercase
- Without a period (.) at the end