Don’t stop running, don’t look back to the road, the road is not sentimentally attached, worth looking forward to only the front

preface

To do a good job, he must sharpen his tools

1 vscode

extensions.json

{ "recommendations": [// file formatting plugin "dbaeumer.vscode-eslint", "esbenp.prettier-vscode", "octref.vetur", // style formatting plugin "hex-ci.stylelint-plus"]}Copy the code

settings.json

{// [vue, js] file "editor.defaultFormatter": "esbenp.prettier-vscode", // File "editor.formatOnSave": CodeActionsOnSave ": {" source.fixall. eslint": true, // Style automatic formatting "source.fixall. stylelint": }, // eslint configure "eslint.format.enable": false, "eslint.alwaysShowStatus": true, // eslint configure "prettier ": 2, "prettier. SingleQuote ": true, "prettier. Semi ": false, // stylelint Configure "stylelint.enable": true, "css.validate": false, "less.validate": false, "scss.validate": false, "[scss]": { "editor.formatOnSave": true } }Copy the code

2 eslint

.eslint.js

Module. Exports = {root: true, env: {node: true}, plugins: ['vue'], // Add prettier to esLint and prettier ['plugin:vue/essential', '@vue/standard', 'prettier'], parserOptions: { parser: 'babel-eslint' }, rules: {// allow no Spaces before functions // 'space-before-function-paren': 'off', 'no-console': process.env.node_env === 'production'? 'warn' : 'off', 'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off' } }Copy the code

3.prettierrc

Install eslint – config – prettier

NPM I eslint-config-prettier -d eslint prettier -d NPM I eslint-config-prettier -dCopy the code

.prettierrc.js

Module. exports = {tabWidth: 2, // set singleQuote: true, // set semicolon: false}Copy the code

4.stylelintrc

Install related plug-ins

npm i stylelint stylelint-config-standard stylelint-order stylelint-config-rational-order stylelint-scss -D
Copy the code

.stylelintrc.js

module.exports = {
  extends: ['stylelint-config-standard', 'stylelint-config-rational-order'],
  plugins: ['stylelint-scss'],
  rules: {
    indentation: 2,
    'no-missing-end-of-source-newline': null,
    'max-nesting-depth': 3,
    'selector-max-compound-selectors': 3,
    'at-rule-no-unknown': null,
    'scss/at-rule-no-unknown': true,
    'function-url-quotes': 'always',
    'number-leading-zero': null,
    'unit-whitelist': ['em', 'rem', 's', '%', 'px', 'deg'],
    'unit-case': 'lower'
  }
}
Copy the code

The end of the

Don’t worry, take your time, it will be all right

Good night duck, good night

Refer to the link

  • Get started with vscode+ Stylelint
  • Vscode esLint prettier configuration
  • Vscode ESLint stylelint configuration

Review past

  • Learn a Vue plugin (1) every day — Better scroll
  • Learn a VUE plugin (2) every day — vue-awesome-swiper