Article description: This article is the notes and experience of the front-end training camp of Regao. If there is something wrong, I hope you can point out and teach, thank you!
Standardized standards
Why should there be standardized standards?
- Software development requires multiple people to collaborate;
- Different developers have different coding habits and preferences;
- Different preferences increase project maintenance costs;
- Each project or team needs to have clear and unified standards.
Where is the need for standardized standards
- Code, documentation, and even submission logs;
- Man-made results during the development process;
- Code standardization is the most important
Implement standardized methods
- Man-made standard conventions before coding;
- Implement Lint through tools (use tools to find irregular processes in the code)
ESLint
- The most mainstream JavaScript Lint tool monitors the quality of JS code;
- ESLint is easy to unify the coding style of developers;
- ESlint can help developers improve their coding skills.
Preparations :
1. Initialize the project and initialize the package.json package management file
yarn init --yes # or npm init -y
2. Install ESLint module as a development dependency
yarn add eslint --dev # or npm install eslint --save-dev
3. Verify the installation result by cd to the corresponding bin command
.\eslint --version
4. Run the cli command through yarn or npm to verify the installation result
yarn eslint --version # or npx eslint --version
Quickly get started with
ESLint check steps:
1. Write the "problem" code:
01-prepare.js:
const foo=123
function fn(){
console.log("hello");
console.log("eslint");
}
fn(
syy()
2. Use eslint to perform detection
$ yarn eslint xx.js # xx.js 指要被检测的文件
As you can see, it is prompted that the configuration file is not found, and the eslint configuration file needs to be used
3. Complete eslint configuration
$ yarn eslint --init # 初始化 eslint 配置文件
4. Use --fix to automatically fix most of the problems in the code style
$ yarn eslint xx.js --fix # xx.js 指要被检测的文件
to sum up
1. ESLint can detect grammatical errors, find problem codes, and detect code style;
2. ESLint can automatically repair most of the problems in code style.
Configuration file For
specific configuration options, please check ESLint official website.
.eslintrc.js configuration file analysis:
module.exports = {
// 标记当前代码最终的运行环境
// 可以同时标记多个环境
env: {
browser: false, // 浏览器
es6: false
},
// 继承一些共享的配置，可以同时继承多个共享配置
extends: [
'standard'
],
// 设置语法解析器的版本
parserOptions: {
ecmaVersion: 2015
},
// 配置 ESlint 中每个校验规则的开启或关闭
rules: {
// 属性值：内置的规则名称
// 属性值：off 关闭 warn 警告 error 错误
// 具体的查看 ESLint 官网
'no-alert': "error"
},
// 额外声明在代码中可以全局使用的成员
globals: {
"jQuery": "readonly"
}
}
Configure annotations
When writing code, use the form of annotations to make ESLint ignore the code marked with annotations during code detection.
const str1 = "${name} is a coder" // eslint-disable-line no-template-curly-in-string
console.log(str1)
Specific rules, please see the related content
Integration
Advantage
1. After integration, ESLint will definitely work;
2. It is unified with the project and management is more convenient
. Integration in gulp
1. Project clone https://github.com/zce/zce-gulp-demo
2. Complete dependency installation:
yarn install
3. Complete the eslint module installation;
yarn add eslint --dev
4. Complete the gulp-eslint module installation (gulp-eslint is a plug-in for eslint in gulp);
$ yarn add gulp-eslint --dev
5. Initialize the eslint configuration file
$ yarn eslint --init
Basically use
gulp-eslint is a plug-in of gulp, and the main check is JS encoding, and the stream can be converted through pipe().
1. In gulpfile.js, code integration
const script = () => {
return src('src/assets/scripts/*.js', {
base: 'src' })
.pipe(plugins.eslint())
.pipe(plugins.eslint.format()) // 在控制台输出 lint 结果
.pipe(plugins.eslint.failAfterError()) // 打印错误编码
.pipe(plugins.babel({
presets: ['@babel/preset-env'] }))
.pipe(dest('temp'))
.pipe(bs.reload({
stream: true }))
}
2. Run the task, it will be automatically detected
yarn gulp script
Webpack integrates eslint
1. Project clone, https://github.com/zce/zce-react-app
2. Install the corresponding module
yarn install # or npm install
3. Install the eslint module
yarn add eslint --dev # or npm i eslint --save-dev
4. Install the eslint-loader module
yarn add eslint-loader --dev
5. Initialize the .eslintrc.js configuration file
yarn eslint --init
Basic use:
In webpack, the JS code is detected through eslint-loader:
1. In webpack.config.js, configure the loader:
module.exports = {
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: 'eslint-loader'
}
]
}
}
2. Install the eslint-plugin-react plug-in to detect react syntax
yarn add eslint-plugin-react --dev
3. In .eslintrc.js, introduce plugins and enable react-related rules:
module.exports = {
rules: {
// 2 代表 error
'react/jax-uses-react': 2,
'react/jax-uses-vars': 2
},
// 指定引用的插件
plugins: [
'react'
]
}
4. Optimize, adopt the form of attribute inheritance:
.eslintrc.js:
module.exports = {
extends: [
'standard',
'plugin: react/recommended' // 属性继承
]
}
Stylelint
Basic introduction:
1. Provide default code inspection rules;
2. Provide CLI tools for quick invocation;
3. Support Sass Less PostCSS through plug-ins;
4. Support Gulp or Webpack integration.
Basic usage:
The usage of Stylelint is similar to ESLint.
1. Install the stylelint module
yarn add stylelint --dev
2. Initialize the .stylelintrc.js configuration file
yarn stylelint --init
3. Run the command for automatic detection
yarn stylelint xx.css
Prettier
Basic introduction:
Prettier, a general-purpose front-end code formatting tool, implements standardized standards in front-end projects.
Basic usage:
1. Install Prettier module
yarn add Prettier --dev
2. Format the code of the specified file, and print out the problematic code on the terminal by default:
yarn prettier xxx # xxx 代表文件名称
3. Use --write to complete the automatic formatting of all files
yarn prettier . --write
Git Hooks
Force Lint before code submission through Git Hooks
Basic introduction:
1. Git Hooks, also called git hooks, each hook corresponds to a task;
2. Hook tasks can be written through shell scripts, and specific operations to be performed when triggered.
Working mechanism:
In the .git repository, there is a hooks folder, which stores multiple hook files, among which pre-commit.sample is the hook before the code comiit, and the operations performed before commit are written internally.
The storage directory, as shown in the figure below:
Basic usage: The
NPM module Husky can realize the usage requirements of Git Hooks.
1. Install the Husky module
yarn add husky --dev
2. In package.json, add husky configuration
{
"scripts": {
"test": "eslint ."
},
"husky": {
"hooks": {
"pre-commit": "npm run test"
}
}
}
3. Install the lint-staged module
yarn add lint-staged --dev
4. In package.json, add lint-staged configuration
{
"scripts": {
"test": "eslint .",
"precommit": "lint-staged"
},
"husky": {
"hooks": {
"pre-commit": "npm run precommit"
}
}
"lint-staged": {
"*.js": [
"eslint",
"git add"
]
}
}