vue3代码规范

一、eslint

1、创建项目
2、yarn add eslint -D
3、yarn eslint --init

自动生成.eslintrc.js文件

module.exports = {
    "env": {
        "browser": true,
        "es2021": true
    },
    "extends": [
        "eslint:recommended",
        "plugin:vue/vue3-essential",
        "plugin:@typescript-eslint/recommended"
    ],
    "parserOptions": {
        "ecmaVersion": "latest",
        "parser": "@typescript-eslint/parser",
        "sourceType": "module"
    },
    "plugins": [
        "vue",
        "@typescript-eslint"
    ],
    "rules": {
    }
}

添加 parser: ‘vue-eslint-parser’,使用vue-eslint，配置parserOptions在vue文件中使用@typescript-eslint/parser；
添加"node": true，加入node引入环境检查

module.exports = {
  env: {
    browser: true,
    es2021: true,
    node: true
  },
  extends: [
    'eslint:recommended',
    'plugin:vue/vue3-essential',
    'plugin:@typescript-eslint/recommended',
    'plugin:prettier/recommended'
  ],
  overrides: [],
  parser: 'vue-eslint-parser',
  parserOptions: {
    ecmaVersion: 'latest',
    sourceType: 'module',
    parser: '@typescript-eslint/parser'
  },
  plugins: ['vue', '@typescript-eslint'],
  rules: {}
}

package.json的scripts中设置lint规则：

“lint”: “eslint . --ext .vue,.js,.ts,.jsx,.tsx --fix”,

执行 yarn lint 可检查代码问题

给vscode的setting.json文件添加配置

{
    // 开启自动修复
    "editor.codeActionsOnSave": {
        "source.fixAll": false,
        "source.fixAll.eslint": true
    }
}

二、prettier

安装prettier: yarn add prettier -D

添加.prettierrc.js文件【.prettierrc.cjs】

module.exports = {
    // 一行的字符数，如果超过会进行换行，默认为80
    printWidth: 80,
    // 一个tab代表几个空格数，默认为80
    tabWidth: 2, 
    // 是否使用tab进行缩进，默认为false，表示用空格进行缩减
    useTabs: false, 
    // 字符串是否使用单引号，默认为false，使用双引号
    singleQuote: true, 
    // 行位是否使用分号，默认为true
    semi: false, 
    // 是否使用尾逗号，有三个可选值"<none|es5|all>"
    trailingComma: "none", 
    // 对象大括号直接是否有空格，默认为true，效果：{ foo: bar }
    bracketSpacing: true
}

package.json的scripts中设置lint规则：

“format”: “prettier --write “./**/*.{html,vue,ts,js,json,md,scss,css}””,

在.vscode/settings.json中添加一下规则

{
    // 保存的时候自动格式化
    "editor.formatOnSave": true,
    // 默认格式化工具选择prettier
    "editor.defaultFormatter": "esbenp.prettier-vscode"
}

三、eslint与prettier的冲突问题

yarn add eslint-config-prettier eslint-plugin-prettier -D

{ 
    extends: [
    'eslint:recommended',
    'plugin:vue/vue3-essential',
    'plugin:@typescript-eslint/recommended',
    // 新增，必须放在最后面
    'plugin:prettier/recommended' 
  ],
}

重启vscode

四、配置stylelint

yarn add stylelint postcss postcss-scss postcss-html stylelint-config-prettier stylelint-config-recommended-scss stylelint-config-standard stylelint-config-standard-vue stylelint-scss stylelint-order -D

增加配置文件 .stylelintrc.js【stylelintrc.cjs】

module.exports = {
  extends: [
    'stylelint-config-standard',
    'stylelint-config-prettier',
    'stylelint-config-recommended-scss',
    'stylelint-config-standard-vue',
    'stylelint-config-tailwindcss/scss'
  ],
  plugins: ['stylelint-order'],
  // 不同格式的文件指定自定义语法
  overrides: [
    {
      files: ['**/*.(scss|css|vue|html)'],
      customSyntax: 'postcss-scss'
    },
    {
      files: ['**/*.(html|vue)'],
      customSyntax: 'postcss-html'
    }
  ],
  ignoreFiles: [
    '**/*.js',
    '**/*.jsx',
    '**/*.tsx',
    '**/*.ts',
    '**/*.json',
    '**/*.md',
    '**/*.yaml'
  ],
  rules: {
    'at-rule-no-unknown': [
      true,
      {
        ignoreAtRules: [
          'tailwind',
          'layer',
          'apply',
          'variants',
          'responsive',
          'screen'
        ]
      }
    ],
    'no-descending-specificity': null, // 禁止在具有较高优先级的选择器后出现被其覆盖的较低优先级的选择器
    'selector-pseudo-element-no-unknown': [
      true,
      {
        ignorePseudoElements: ['v-deep', 'tailwind']
      }
    ],
    'selector-pseudo-class-no-unknown': [
      true,
      {
        ignorePseudoClasses: ['deep']
      }
    ],
    // 指定样式的排序
    'order/properties-order': [
      'position',
      'top',
      'right',
      'bottom',
      'left',
      'z-index',
      'display',
      'justify-content',
      'align-items',
      'float',
      'clear',
      'overflow',
      'overflow-x',
      'overflow-y',
      'padding',
      'padding-top',
      'padding-right',
      'padding-bottom',
      'padding-left',
      'margin',
      'margin-top',
      'margin-right',
      'margin-bottom',
      'margin-left',
      'width',
      'min-width',
      'max-width',
      'height',
      'min-height',
      'max-height',
      'font-size',
      'font-family',
      'text-align',
      'text-justify',
      'text-indent',
      'text-overflow',
      'text-decoration',
      'white-space',
      'color',
      'background',
      'background-position',
      'background-repeat',
      'background-size',
      'background-color',
      'background-clip',
      'border',
      'border-style',
      'border-width',
      'border-color',
      'border-top-style',
      'border-top-width',
      'border-top-color',
      'border-right-style',
      'border-right-width',
      'border-right-color',
      'border-bottom-style',
      'border-bottom-width',
      'border-bottom-color',
      'border-left-style',
      'border-left-width',
      'border-left-color',
      'border-radius',
      'opacity',
      'filter',
      'list-style',
      'outline',
      'visibility',
      'box-shadow',
      'text-shadow',
      'resize',
      'transition'
    ]
  }
}

package.json的scripts中设置lint规则：

“lint:style”: “stylelint “./**/*.{css,less,vue,html}” --fix”

安装vscode的Stylelint插件，在.vscode/settings.json中添加一下规则，安装stylelint-config-tailwindcss添加stylelint的tailwindcss检查

{
  // 开启自动修复
  "editor.codeActionsOnSave": {
    "source.fixAll": false,
    "source.fixAll.eslint": true,
    "source.fixAll.stylelint": true
  },
  // 保存的时候自动格式化
  "editor.formatOnSave": true,
  // 默认格式化工具选择prettier
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  // 配置该项，新建文件时默认就是space：2
  "editor.tabSize": 2,
  // stylelint校验的文件格式
  "stylelint.validate": ["css", "scss", "vue", "html"],
  "stylelint.config": {
    "extends": ["stylelint-config-standard"],
    "rules": {
      "at-rule-no-unknown": [
        true,
        {
          "ignoreAtRules": [
            "tailwind",
            "layer",
            "apply",
            "variants",
            "responsive",
            "screen"
          ]
        }
      ]
    }
  },
  "css.lint.unknownAtRules": "ignore",
  "[scss]": {
    "editor.defaultFormatter": "stylelint.vscode-stylelint"
  }
}

五、配置husky

yarn add husky -D

{
    "scripts": {
        "prepare": "husky install"
    },
}

执行命令：

pnpm husky add .husky/pre-commit "pnpm lint && pnpm format && pnpm lint:style"

tailwindcss引入改成

import 'tailwindcss/base'
import 'tailwindcss/components'
import 'tailwindcss/utilities'

yarn add lint-staged @commitlint/cli @commitlint/config-conventional -D

module.exports = {
  extends: ['@commitlint/config-conventional'],
  rules: {
    //0为disable，1为warning，2为error
    //always|never
    //第三位该rule的值
    'type-enum': [
      2,
      'always',
      [
        'feature',
        'update',
        'fixbug',
        'refactor',
        'optimize',
        'style',
        'docs',
        'chore',
        'merge'
      ]
    ],
    'subject-full-stop': [0, 'never'],
    'subject-case': [0, 'never']
  }
}

npx husky add .husky/commit-msg 'npx --no -- commitlint --edit "$1"'

pre-commit文件改成

这篇好文章是转载于：学新通技术网