Front end code style practice prettier + eslint + git hook + lint staged

Neat code is like a beautiful prose .—— Grady Booch

Preface ： In a complex business iteration , Take over other projects , If there is no uniform code style , It's quite difficult to read , After all, everyone in the team is not used to the same . Teamwork , It means that you need to sacrifice some personality , Reduce unnecessary quarrels .

1.Prettier What is it? ？

seeing the name of a thing one thinks of its function prettier（ More beautiful ）, Make your code more beautiful . Official website It's very clear

• An opinionated code formatter
• Supports many languages
• Integrates with most editors
• Has few options

Few configurations , It means a strong contract system , And the first one is followed opinionated .what-is-opinionated-software, In short, it is a strong contract system , There are less opportunities to choose from . This design concept is used in Uniform code style The tools are extremely correct , The purpose is to unify , A small amount of configuration , Let the team stop arguing .

2.ESlint What is it?

ESLint It's an open source JavaScript Code checker , from Nicholas C. Zakas On 2013 year 6 Month creation . Code checking is a static analysis , Often used to find problematic patterns or code , And it doesn't depend on the specific coding style .

ESLint It's a code checking tool , It can be flexibly configured by developers option, So that it can meet the requirements of the established code specifications .

tip： Front end code doesn't matter TS still ES, Use both ESLint, TSLint No more maintenance

3.Prettier and ESLint The difference between

I started thinking that these two things seemed to be a little repetitive , There is indeed intersection , however Prettier Only do the unification of code style , It doesn't check the code specifications , A check of the code specification should be given to ESLint.

ESLint The main solution is code specification , although ESLint You can also solve some code style problems , But not good enough , and prettier Just for format And the tools of life .

summary ：ESLint Focus on all aspects of Lint Check ,Prettier Focus on code formatting related .

4. practice

4.1 To configure eslint

npm i -D eslint

//.eslintrc.js
module.exports = {
  root: true,
  env: {
    node: true
  },
  extends: ['eslint:recommended'],
  rules: {
    'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
    // Force single quotes 
    quotes: ['error', 'single'],  //  Look here , Is it right? prettier Did the repetitive thing , Can be deleted ～
    // Force ending without semicolon 
    semi: ['error', 'never']
  },
  parserOptions: {
    parser: 'babel-eslint',
    ecmaVersion: 6 //  Support es6
  }
}

4.2 To configure prettier

npm i -D prettier

// .prettierrc.js
module.exports = {
  //  One line at a time  100  character 
  printWidth: 100,
  //  Use  4  Space indent 
  tabWidth: 2,
  //  Don't use indents , And use spaces 
  useTabs: false,
  //  A semicolon is required at the end of the line 
  semi: false,
  //  Use single quotes 
  singleQuote: true,
  //  Object's  key  Use quotation marks only if necessary 
  quoteProps: 'as-needed',
  // jsx  Don't use single quotes , Use double quotes 
  jsxSingleQuote: false,
  //  Comma is not required at the end 
  trailingComma: 'none',
  //  A space is required at the beginning and end of the brace 
  bracketSpacing: true,
  // jsx  The back angle bracket of the label needs to wrap 
  jsxBracketSameLine: false,
  //  Arrow function , When there is only one parameter , You also need brackets 
  arrowParens: 'always',
  //  The format range of each file is the whole content of the file 
  rangeStart: 0,
  rangeEnd: Infinity,
  //  No need to write the beginning of the file  @prettier
  requirePragma: false,
  //  No need to automatically insert... At the beginning of the file  @prettier
  insertPragma: false,
  //  Use the Default Wrap criteria 
  proseWrap: 'preserve',
  //  Line breaks use  lf
  endOfLine: 'lf'
}

4.3 ESLint And Prettier In combination with

npm i -D eslint-plugin-prettier

//.eslintrc.js
module.exports = {
  rules: {
      'prettier/prettier': 'error'  //  Mark 
  },
  "extends": ["plugin:prettier/recommended"] //  plug-in unit 
}

If it is vue Remember to add , "plugin:vue/essential" It's also to be installed ～

npm i -D eslint-plugin-vue

eslint-plugin-prettier The plug-in will call prettier Check your code style , The principle is to use prettier Format your code , Then compare it with the code before formatting , If there is any inconsistency in the past , This place will be prettier marked .

When executed ESLint fix When prettier Of lint Conflicts will be ESLint As error handling

4.4 solve eslint and prettier The conflict of

Mentioned above ,ESLint Related to formatting rule and prettier Of rule There's a little overlap , If you want to give everything about formatting to prettier To do , Use this tool to shield ESLint Related to formatting rule.

install eslint-config-prettier that will do

npm i -D eslint-config-prettier

4.5 install lint-staged husky

npm install husky lint-staged

// package.json
"husky": {
  "hooks": {
    "pre-commit": "lint-staged"
  }
},
"lint-staged": {
  "*.{js, css, md}": "eslint --fix"
},

4.6 Last vscode To configure

Open profile setting.json

//setting.json
{
    "editor.codeActionsOnSave": {
        "source.fixAll.eslint": true,  //  Automatically execute when saving eslint
    },
    
}

5. summary

End of configuration Enjoy the hug of colleagues ！