Article content output source: pull hook big front-end high salary training camp

Introduction to normalization

  • Standardization is an important part of our practice of front-end engineering

  • Why have normative standards

    • Software development requires multiple people to work together
    • Different developers have different coding habits and preferences
    • Different preferences increase project maintenance costs
    • Each project or team needs clear and consistent standards

  • Where do I need standardization standards

    • Code, documentation, even commit logs
    • An artifact written artificially during development
    • The code standardization specification is the most important

  • Methods for implementing standardization

    • Standard convention for encoding predecessors

    • Implement Lint with tools

    • Common normalization implementations

      • Use the ESLint tool
      • Custom ESLint validation rules
      • ESLint support for Typescript
      • ESLint combines automation tools or Webpack
      • A derivative based on ESLint
      • Use of Stylelint tool

ESLint

  • introduce

    • The most popular JavaScript Lint tool to monitor the quality of JavaScript code
    • ESLint makes it easy to unify developer coding styles
    • ESLint can help developers improve their coding capabilities

  • The installation

    • Initialize the project

      • yarn init –yes

    • Install the ESLint module as a development dependency

      • npm install eslint –save-dev

    • Verify the installation using CLI commands

      • npx eslint –version

  • Quick learning

    • 1. Write “problem” code

      • Create a new file 01-prepare.js in the root directory

        • const foo = 123

function fn(){ console.log(‘hello’) console.log(‘eslint’)

}

fn(

syy()

-npx eslint. \01-prepare.js - Error: Eslint couldn't find a configuration file. - 解决 error -npx eslint --init - Eslintrc -npx eslint. \01-prepare.js -ok: can detect errors in single code - auto-correct -npx eslint. \01-prepare.js --fixCopy the code

  • Configuration file Parsing

    • module.exports = {

    Env: {browser: true, ES2020: true}, // Extends some shared configuration extends: [‘standard’], // Set parserOptions: {// ecmaVersion controls whether or not an ES version of the syntax is allowed. This controls whether or not a member is available, and does not mean whether or not a member is available. Rules: {‘no-alert’: “error”}, // For additional declarations of global members we can use in our code globals: {“jQuery”: “readonly” }

}

  • Annotation configuration

    • The simple idea is to annotate the configuration in a script file and then perform the verification of the code

    • Create a new file eslint-configuration-comments.js in the project root directory

      • const str1 = ‘${name} is a coder’

console.log(str1)

- yarn eslint. \eslint-configuration-comments.js - Error: Unexpected Template string expression - Modify the file eslint-configuration-comments.js - // eslint-disable-lineCopy the code

const str1 = ‘${name} is a coder’ console.log(str1)

- yarn eslint .\eslint-configuration-comments.js - OK: Eslint-configuration-comments.js - // eslint-disable-line no-template-curly-in-stringCopy the code

const str1 = ‘${name} is a coder’ console.log(str1)

-yarn eslint. \eslint-configuration-comments.js -ok: disables validation only for specified rules.Copy the code

  • Combine automated tools

    • advantages

      • After integration, ESLint will definitely work
      • Unified with the project, more convenient management

    • To prepare

      • Cloning code

        • Git clone github.com/zce/zce-gul…

      • Complete the corresponding dependency installation

      • The ESLint module is installed

      • The gulp-ESLint module is installed

    • Example Modify the gulpfile.js file in the root directory

      • Const script = () ⥤ {

    return src(‘src/assets/scripts/*.js’, { base: ‘src’ }) .pipe(plugins.eslint()) .pipe(plugins.babel({ presets: [‘@babel/preset-env’] })) .pipe(dest(‘temp’) .pipe(bs.reload({ stream: true }))

}

module.exports = { clean, build, develop, script }

-execute script task -npx gulp script -error: NPX ESLint --init - execute script task -npx gulp script -ok: no ESLint configuration found - 解决 error - initialize ESLint configuration file NPX ESLint --init - execute script task -npx gulp script -ok: Eslint normal execution - modify the file SRC/assets/scripts/main js - $(($) ⥤ {Copy the code

Const body=body =body=(‘ HTML, body ‘) (‘scroll_top’).on(‘click’, () ⥤ {body.animate({scrollTop: 0 }, 600) return false }) }) const a=1

-npx gulp script -ok: gulpfile.js file in root directory -const script =()⥤{Copy the code

return src(‘src/assets/scripts/*.js’, { base: ‘src’ }) .pipe(plugins.eslint()) .pipe(plugins.eslint.format()) .pipe(plugins.eslint.failAfterError()) .pipe(plugins.babel({ presets: [‘@babel/preset-env’] })) .pipe(dest(‘temp’) .pipe(bs.reload({ stream: true })) }

module.exports = { clean, build, develop, script }

-npx gulp script -ok ~Copy the code

  • Combining with the webpack

    • To prepare

      • Cloning code

        • Git clone github.com/zce/zce-gul…

      • Complete the corresponding dependency installation

      • The ESLint module is installed

      • The ESlint-Loader module is installed

      • Initializes the.eslintrc.js configuration file

    • Webpack.config. js in the root directory of the project

      • const HtmlWebpackPlugin = require(‘html-webpack-plugin’)

module.exports ={ mode: ‘production’ entry: ‘./src/main.js’ module: { rules:[ { test: ‘.js/, exclude: /node_modules/, use: ‘babel-loader’ }, { test: ‘\.js/, exclude: /node_modules/, use: ‘eslint-loader’, enforce: ‘pre’ }, { test: /.css$/, use: [ ‘style-loader’, ‘css-loader’ ] } ] }, plugins: [ new HtmlWebpackPulgin({ template: ‘src/index.html’ }) ]

-npx webpack-ok: esLint successfully integrated - subsequent configuration - module.exports = {Copy the code

Env: {browser: true, ES2020: true}, // Extends some shared configuration extends: [‘standard’], // Set parserOptions: {// ecmaVersion controls whether or not an ES version of the syntax is allowed. This controls whether or not a member is available, and does not mean whether or not a member is available. Rules: {‘react/jsx-uses-react’: 2, ‘react/jsx-uses-vars’: 2,}, plugins: [ ‘react’ ] } – npx webpack

-ok: esLint successfully integrated -src /main.js -import React from 'React'Copy the code

import ReactDOM from ‘react-dom’ import ‘./global.css’ import App from ‘./components/App’ ReactDOM.render( < react. StrictMode> <Aрр /> </ react. StrictMode>, document.getelementByid (‘root’))

-npm install eslint-plugin-react -- save-dev-yarn webpack-ok ~ -inherit -module.exports = {Copy the code

Env: {browser: true, ES2020: true}, // Extends some shared configuration extends: [‘standard’, ‘plugin:react/recommended’], // Set parserOptions: {// ecmaVersion controls whether or not an ES version of the syntax is allowed. This controls whether or not a member is available, and does not mean whether or not a member is available. Rules: {// ‘react/jsx-uses-vars’: 2, // ‘react/jsx-uses-vars’: 2,}, // plugins: [ // ‘react’ // ] } – yarn webpack

  • Modernization projects integrate ESLint

    • npm install @vue/cli -g

    • vue create syy-vue-app

      • Select the corresponding option as required, and then generate the basic project structure

    • cd syy-vue-app

    • npm run serve

      • OK~

  • Check eslint TypeScript

    • npx eslint –init

      • Select the TypeScript option

    • Create index.ts in the project root directory

      • function foo(ms: string) {

    console.log(msg)

}

foo(‘hello typescript’)

Exports = {eslint - module.exports = {Copy the code

Env: {browser: true, ES2020: true}, // Extends some shared configuration extends: [‘standard’, ‘plugin:react/recommended’], parser: ‘@typescript-eslint/parser’, // parserOptions: {// ecmaVersion controls whether or not an ES version of the syntax is allowed. This controls whether or not a member is available, and does not mean whether or not a member is available. Rules: {// ‘react/jsx-uses-vars’: 2, // ‘react/jsx-uses-vars’: 2,}, // plugins: [ // ‘react’ // ] }

- npx eslint  .\index.ts

	- ok~q
Copy the code

The understanding of the Stylelint

  • Used to introduce

    • Provides default code review rules
    • Provides CLI tools, quick call
    • Supports Sass Less PostCSS through plug-ins
    • Support Gulp or Webpack integration

  • The installation

    • npm install stylelint -D

  • test

    • npx stylelint ./index.css

      • Error: No configuration provided for

  • To solve the error

    • Add the.stylelintrc.js file to the project root directory

      • module.exports ={

    extends: ‘stylelint-config-standard’

}

- npm install stylelint-config-standard -D
Copy the code

  • npx stylelint ./index.css

    • OK: You can find the problem in the CSS

  • Auto repair

    • npx stylelint ./index.css –fix

  • Check the Sass code

    • npm install stylelint-config-sass-guidelines -D

  • Modify the. Stylelintrc.js file

    • module.exports ={

    extends: [ ‘stylelint-config-standard’, ‘stylelint-config-sass-guidelines’ ]

}

  • npx stylelint ./index.sass

    • OK: You can find the problem in sass

The use of the Prettier

  • General purpose front-end code formatting tool

  • The installation

    • npm install prettier -D

  • use

    • npx prettier style.css

      • Output the formatted code directly to the console

    • npx prettier style.css –write

      • Writes formatted code directly to the file

    • Batch formatting

      • npx prettier . –write

Git Hooks

  • introduce

    • background

      • Problem: No lint operations are performed before code is submitted to the repository
      • Fix: Enforce Lint before code commits via Git Hooks

    • Git Hooks are also known as Git Hooks, each corresponding to a task

    • Shell scripts allow you to write the actions to be performed when the hook task fires

    • The.git hidden directory contains the hooks folder 📂, which contains several sample files, each representing a hook

  • Eslint incorporates Git Hooks

    • background

      • The problem

        • Many front-end developers are not good with shells

      • To solve

        • Husky implements Git Hooks

    • The installation

      • npm install husky -D

    • Add the husky configuration to the package.json file in the project root directory

      • “husky”: {

    hooks: { “pre-commit”: “npm run test” }

}

- Create an index.js file in the project root directory - const a = 1Copy the code

2222

-git add. -git commit -m "333" -git add. -git commit -m "333" -git add. -git commit -m "333" -git add.Copy the code

“test” : “eslint./index.js” }

- Modify index.js file - const a = 1Copy the code

3333

-git add. -git commit -m "444" -ok ~ -automatically fix and put the modified code into the staging area -install -npm install lint-lantern-d-package. json add configuration - "scripts": {Copy the code

“test” : “eslint./index.js”, “precommit”: “lint-staged” },

“lint-staged”: { “*.js”: [ “eslint”, “git add” ] }, “husky”: { hooks: { “pre-commit”: “npm run precommit” } }

- Modify index.js file - const a = 1Copy the code

4444

	- git add  .
	- git commit -m "555"

		- OK~
Copy the code