Code formatting of common configuration items to facilitate uniform code specification

1. Install dependencies

Copy to the following directory and run the command

npm i eslint babel-eslint eslint-plugin-vue husky lint-staged prettier @vue/eslint-config-prettier eslint-plugin-prettier stylelint stylelint-config-prettier stylelint-config-standard stylelint-order -D
Copy the code

2. Create write validation rules for the following files in the root directory

prettier.config.js

Define rules for formatting after saving

module.exports = {
  / / line width default: 80
  printWidth: 100.// TAB width default:2
  tabWidth: 2.// Use the TAB key default:false
  useTabs: false.// Whether to add a semicolon at the end of a statement default:true
  semi: false.// Whether to use single quotation marks Default :false
  singleQuote: true.Default :"as-needed"
  quoteProps: 'as-needed'.// JSX single quotation mark default:false
  jsxSingleQuote: true.// Last object element with comma default:"es5"
  trailingComma: 'es5'.// Print Spaces after ({) and before (}) the curly braces used in object literal declarations default:true
  bracketSpacing: true.// Place > multi-line JSX elements at the end of the last line, not on the next line alone (not applicable to closed elements). default:false
  jsxBracketSameLine: false.// (x) => {} Whether to include parentheses default:"always"
  arrowParens: 'avoid'.// default:0
  rangeStart: 0.// default:Infinity
  rangeEnd: Infinity.// default:false
  insertPragma: false.// default:false
  requirePragma: false.// Do not pack markdown text default:"preserve"
  proseWrap: 'never'.// HTML white space sensitivity default:" CSS"
  htmlWhitespaceSensitivity: 'ignore'.// Indent code inside Script and Style tags in *.vue files default:false
  vueIndentScriptAndStyle: true.// End newline default:"lf"
  endOfLine: 'auto'.// default:"auto"
  embeddedLanguageFormatting: 'off'.overrides: [{files: '*.md'.options: {
        tabWidth: 2,},},],}Copy the code

.eslintrc.js

Eslint configuration

module.exports = {
  root: true.env: {
    browser: true.node: true.es6: true,},// Configure js global variables, since uni-app, global UNI is not needed, and 5+ plus objects
  globals: {
    uni: 'readonly'.plus: 'readonly'.wx: 'readonly',},Prettier prettier vs Code prettier vs Code
  extends: ['plugin:vue/essential'.'eslint:recommended'.'@vue/prettier'].parserOptions: {
    parser: 'babel-eslint',},rules: {
    // 'prettier/prettier': 'error',
    'no-console': [
      'warn',
      {
        allow: ['warn'.'error'],},],'no-eval': 'error'.'no-alert': 'error'.'vue/max-attributes-per-line': [
      0,
      {
        singleline: 10.multiline: {
          max: 1.allowFirstLine: false,}},],'vue/singleline-html-element-content-newline': 'off'.'vue/multiline-html-element-content-newline': 'off'.'vue/name-property-casing': ['error'.'PascalCase'].'vue/no-v-html': 'off'.'accessor-pairs': 2.'block-spacing': [2.'always'].'brace-style': [
      2.'1tbs',
      {
        allowSingleLine: true],},// Attribute hump name
    camelcase: [
      0,
      {
        properties: 'always'],},'comma-dangle': [2.'only-multiline'].'comma-style': [2.'last'].'constructor-super': 2.curly: [2.'multi-line'].'dot-location': [2.'property'].'eol-last': 2.eqeqeq: [
      'warn'.'always',
      {
        null: 'ignore'],},'generator-star-spacing': [
      2,
      {
        before: true.after: true],},'handle-callback-err': [2.'^(err|error)$'].'jsx-quotes': [2.'prefer-single'].'new-cap': [
      2,
      {
        newIsCap: true.capIsNew: false],},'new-parens': 2.'no-array-constructor': 2.'no-caller': 2.'no-class-assign': 2.'no-cond-assign': 2.'no-const-assign': 2.'no-control-regex': 0.'no-delete-var': 2.'no-dupe-args': 2.'no-dupe-class-members': 2.'no-dupe-keys': 2.'no-duplicate-case': 2.'no-empty-character-class': 2.'no-empty-pattern': 2.'no-ex-assign': 2.'no-extend-native': 2.'no-extra-bind': 2.'no-extra-boolean-cast': 2.'no-extra-parens': [2.'functions'].'no-fallthrough': 2.'no-floating-decimal': 2.'no-func-assign': 2.'no-implied-eval': 2.'no-inner-declarations': [2.'functions'].'no-invalid-regexp': 2.'no-irregular-whitespace': 2.'no-iterator': 2.'no-label-var': 2.'no-labels': [
      2,
      {
        allowLoop: false.allowSwitch: false],},'no-lone-blocks': 2.'no-mixed-spaces-and-tabs': 1.'no-multi-spaces': 2.'no-multi-str': 2.'no-native-reassign': 2.'no-negated-in-lhs': 2.'no-new-object': 2.'no-new-require': 2.'no-new-symbol': 2.'no-new-wrappers': 2.'no-obj-calls': 2.'no-octal': 2.'no-octal-escape': 2.'no-path-concat': 2.'no-proto': 2.'no-redeclare': 2.'no-regex-spaces': 2.'no-return-assign': [2.'except-parens'].'no-self-assign': 2.'no-self-compare': 2.'no-sequences': 2.'no-shadow-restricted-names': 2.'no-spaced-func': 2.'no-sparse-arrays': 2.'no-this-before-super': 2.'no-throw-literal': 2.'no-trailing-spaces': 0.'no-undef': 2.'no-undef-init': 2.'no-unexpected-multiline': 2.'no-unmodified-loop-condition': 2.'no-unneeded-ternary': [
      2,
      {
        defaultAssignment: false],},'no-unreachable': 2.'no-unsafe-finally': 2.'no-unused-vars': [
      2,
      {
        vars: 'all'.args: 'none'],},'no-useless-call': 2.'no-useless-computed-key': 2.'no-useless-constructor': 2.'no-useless-escape': 0.'no-whitespace-before-property': 2.'no-with': 2.'one-var': [
      2,
      {
        initialized: 'never'],},'operator-linebreak': [
      2.'after',
      {
        overrides: {
          '? ': 'before'.':': 'before',}},],'padded-blocks': [2.'never'].quotes: [
      2.'single',
      {
        avoidEscape: true.allowTemplateLiterals: true],},'semi-spacing': [
      2,
      {
        before: false.after: true],},'space-in-parens': [2.'never'].'space-infix-ops': 1.'space-unary-ops': [
      0,
      {
        words: true.nonwords: false],},'template-curly-spacing': [2.'never'].'use-isnan': 2.'valid-typeof': 2.'wrap-iife': [2.'any'].'yield-star-spacing': [2.'both'].yoda: [2.'never'].'prefer-const': 2.'array-bracket-spacing': [2.'never'].'no-prototype-builtins': 0.// Start custom
    'vue/html-indent': 0.'vue/html-closing-bracket-newline': 0.'vue/html-self-closing': 0.indent: 0.// A semicolon on the end of a sentence
    semi: 0.'comma-spacing': 0.'space-before-blocks': 0.'keyword-spacing': 0.'key-spacing': 0.'no-multiple-empty-lines': 0.'spaced-comment': 0.'space-before-function-paren': 0.'arrow-spacing': 0.'object-curly-spacing': 0,}}Copy the code

.eslintignore

Ignore the following files

unpackage
node_modules
Copy the code

stylelint.config.js

Define rules for stylelint

module.exports = {
  root: true.plugins: ['stylelint-order'].extends: ['stylelint-config-standard'.'stylelint-config-prettier'].rules: {
    'selector-pseudo-class-no-unknown': [
      true,
      {
        ignorePseudoClasses: ['global'.'export'],},],'at-rule-no-unknown': [
      true,
      {
        ignoreAtRules: ['function'.'if'.'return'.'include'.'extend'.'mixin'.'else'.'while'.'for'.'each'],},],'no-duplicate-selectors': null.'no-empty-source': null.'unicode-bom': 'never'.'no-descending-specificity': null.'font-family-no-missing-generic-family-keyword': null.'declaration-colon-space-after': 'always-single-line'.'declaration-colon-space-before': 'never'.'declaration-block-trailing-semicolon': 'always'.'rule-empty-line-before': [
      'always',
      {
        ignore: ['after-comment'.'first-nested'],},],'property-no-unknown': [
      true,
      {
        'ignoreProperties': ['lines'.'/ ^ * /'],}],'media-feature-name-no-unknown': [
      true,
      {
        ignoreMediaFeatureNames: 'min-device-pixel-ratio'],},'unit-no-unknown': [
      true,
      {
        ignoreUnits: ['rpx'],},],'selector-pseudo-element-no-unknown': [
      true,
      {
        ignorePseudoElements: ['v-deep'],},],// Specify the alphabetical order of attributes in the declaration block
    'order/properties-order': [
      'position'.'top'.'right'.'bottom'.'left'.'z-index'.'display'.'float'.'width'.'height'.'max-width'.'max-height'.'min-width'.'min-height'.'padding'.'padding-top'.'padding-right'.'padding-bottom'.'padding-left'.'margin'.'margin-top'.'margin-right'.'margin-bottom'.'margin-left'.'margin-collapse'.'margin-top-collapse'.'margin-right-collapse'.'margin-bottom-collapse'.'margin-left-collapse'.'overflow'.'overflow-x'.'overflow-y'.'clip'.'clear'.'font'.'font-family'.'font-size'.'font-smoothing'.'osx-font-smoothing'.'font-style'.'font-weight'.'hyphens'.'src'.'line-height'.'letter-spacing'.'word-spacing'.'color'.'text-align'.'text-decoration'.'text-indent'.'text-overflow'.'text-rendering'.'text-size-adjust'.'text-shadow'.'text-transform'.'word-break'.'word-wrap'.'white-space'.'vertical-align'.'list-style'.'list-style-type'.'list-style-position'.'list-style-image'.'pointer-events'.'cursor'.'background'.'background-attachment'.'background-color'.'background-image'.'background-position'.'background-repeat'.'background-size'.'border'.'border-collapse'.'border-top'.'border-right'.'border-bottom'.'border-left'.'border-color'.'border-image'.'border-top-color'.'border-right-color'.'border-bottom-color'.'border-left-color'.'border-spacing'.'border-style'.'border-top-style'.'border-right-style'.'border-bottom-style'.'border-left-style'.'border-width'.'border-top-width'.'border-right-width'.'border-bottom-width'.'border-left-width'.'border-radius'.'border-top-right-radius'.'border-bottom-right-radius'.'border-bottom-left-radius'.'border-top-left-radius'.'border-radius-topright'.'border-radius-bottomright'.'border-radius-bottomleft'.'border-radius-topleft'.'content'.'quotes'.'outline'.'outline-offset'.'opacity'.'filter'.'visibility'.'size'.'zoom'.'transform'.'box-align'.'box-flex'.'box-orient'.'box-pack'.'box-shadow'.'box-sizing'.'table-layout'.'animation'.'animation-delay'.'animation-duration'.'animation-iteration-count'.'animation-name'.'animation-play-state'.'animation-timing-function'.'animation-fill-mode'.'transition'.'transition-delay'.'transition-duration'.'transition-property'.'transition-timing-function'.'background-clip'.'backface-visibility'.'resize'.'appearance'.'user-select'.'interpolation-mode'.'direction'.'marks'.'page'.'set-link-source'.'unicode-bidi'.'speak',]}}Copy the code

lint-staged.config.js

module.exports = {
  '*.{js,jsx,ts,tsx}': ['eslint --fix'.'prettier --write'].'{! (package)*.json,*.code-snippets,.! (browserslist)*rc}': ['prettier --write--parser json'].'package.json': ['prettier --write'].'*.vue': ['prettier --write'.'stylelint --fix --allow-empty-input'].'*.{scss,less,styl,css,html}': ['stylelint --fix --allow-empty-input'.'prettier --write'].'*.md': ['prettier --write'],}Copy the code

package.json

{..."scripts": {
    "lint:eslint": "eslint --fix --ext \"src/**/*.{vue,less,css,scss}\""."lint:prettier": "prettier --write --loglevel warn \"src/**/*.{js,json,tsx,css,less,scss,vue,html,md}\""."lint:stylelint": "stylelint --fix \"**/*.{vue,less,postcss,css,scss}\" --cache --cache-location node_modules/.cache/stylelint/"."gc": "git add -A && git-cz && git pull && git push"
  },
  "gitHooks": {
    "pre-commit": "lint-staged"
  },
  "lint-staged": {
    "*.{js,jsx,vue}": [
      "vue-cli-service lint"."git add"]},"husky": {
    "hooks": {
      "pre-commit": "lint-staged"}}}Copy the code