Alibaba front-end code specification integration tool F2ELint tutorial

foreword

  I recently started to learn the front-end and created a new front-end project. I plan 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 original plan is to deploy Eslint + Prettier + Husky + Commitlint + Lint-staged separately. If this set of solutions is deployed one by one, a lot of configuration files need to be written, which is very energy-consuming. Later, I found out that Alibaba has a "Alibaba front-end protocol" project, which mainly includes two parts: "statute document" and "supporting tools". Only the "supporting tools" part is open, and supporting tools such as F2ELint can be used to implement project specifications.
  The project only started last year, not many people know about it, and the weekly downloads are only a few hundred. Currently (2022.3.8) it only has 267 stars on github, and version 2.2.1 was released 8 days ago. It is recommended to download and try it out.

process

f2elint install

  First, you need to initialize the project and generate the package.json file:

npm init

  After defining the project-related information, install f2elint

npm install f2elint -g 
# 或使用淘宝镜像
npm install f2elint -g --registry=http://registry.npm.taobao.org 

  The installation process will ask you to choose the language, framework, and lint information related to this project. My project currently does not use Vue and other frameworks, and does not need MarkdownLint, so I chose 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.
  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

  f2elint has written various configuration files, the specific contents are as follows:

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

  At the same time, f2elint is configured with the git commit interface. When git commits, it will run f2elint commit-file-scan and f2elint commit-msg-scan to check the rules of the submitted files and submitted information respectively.

vscode installs 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 Ali's front-end naming standard to standardize your own projects. Here is an example of formatting:

git

  Initialize the git local warehouse, submit the code and connect to github. (A warehouse must be created first on github)

git init
git add .
git commit -m "xxxxx"
git remote add origin https://github.com/XXXXX/projectname.git

  At the same time, I created a .gitignore file and wrote in the configuration files that do not need to be uploaded to the warehouse. The specific content is as follows:

.vscode/
node_modules/
.editorconfig
.eslintignore
.eslintrc.js
.prettierrc.js
.stylelintignore
.stylelintrc.js
commitlint.config.js
f2elint.config.js
package.json
package-lock.json

  This way only the project files exist in the repository.

husky installation

  Husky allows us to easily add git hooks to the project. When git commits, f2elint commit-file-scan and f2elint commit-msg-scan will be run to check the rules of the submitted files and submitted information respectively.

# 安装husky
npm install husky --save-dev

  After installation, if you do not submit according to the specification, you will be prompted to fail the submission. The following are two examples of submission failures. The first one does not conform to the ESlint specification, and the second one does not conform to the commit specification.

  The submission is successful as shown in the figure:

Git Commit specification

<type>(<scope>): <subject>

  type: used to describe the category of commit, only the following 8 identifiers are allowed.

1. feat: new function (feature)
2. fix: fix bugs
3. docs: documentation
4. style: format (changes that do not affect code operation)
5. refactor: refactoring (that is, not a new feature, nor a code change to modify a bug)
6. test: add test
7. chore: changes to the build process or auxiliary tools
8. 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.

1. Start with a verb and use the first-person present tense, such as change, not changed or changes
2. first letter lowercase
3. Without a period (.) at the end

possible problems

  If when executing f2elint init, it prompts: because scripts are forbidden to run on this system. For more information, see about_Execution_Policies at https:/go.microsoft.com/fwlink/?LinkID=135170.
  This is because the execution policy is likely to be Restricted (the default setting) when Windows PowerShell starts on the computer. The Restricted execution policy does not allow any scripts to run.

# 输入后选y，更改执行策略
set-executionpolicy remotesigned

reference link

Alibaba front-end protocol and supporting tools Github warehouse
f2elint Npm package
git principle – commit specification
PowerShell: Because scripts are prohibited to run on this system, the solution