如何用ts搭建一个vue3通用项目底座 | 第二篇（2）：配置项目规范

前言

上一篇创建了项目，接下来开始进行代码规范配置。

3、eslint配置

创建项目所带的eslint不是很全面，重新改动一下。

// .eslintrc.cjs
module.exports = {
  /**
   * 默认情况下，ESLint 会在所有父级目录里寻找配置文件，一直到根目录
   * 为了将 ESLint 限制到一个特定的项目 设置 'root': true
   * ESLint 一旦发现配置文件中有 'root': true，它就会停止在父级目录中寻找。
   */
  root: true,
  // 指定环境
  env: {
    // 浏览器环境中的全局变量
    browser: true,
    // Node.js 全局变量和 Node.js 作用域
    node: true,
    // 支持es6
    es6: true,
  },
  // 定义全局变量
  globals: {
    // script setup
    defineProps: 'readonly',
    defineEmits: 'readonly',
    defineExpose: 'readonly',
  },
  // 解析器只能有一个。安装了vue-eslint-parser就无需安装babel-eslint
  parser: 'vue-eslint-parser',
  // 解析器配置项
  parserOptions: {
    // ESLint默认是使用 Espree 进行语法解析, 无法解析ts,因此使用@typescript-eslint/parser替代默认解析器
    parser: '@typescript-eslint/parser',
    ecmaVersion: 2020,
    //  设置为 'script' (默认) 或 'module'（如果你的代码是 ECMAScript 模块)
    sourceType: 'module',
  },
  extends: [
    // 最基本配置
    'plugin:vue/vue3-essential',
    // // eslint官方推荐使用,vue3的规则集是plugin:vue/vue3-recommended
    'eslint:recommended', // 代码快速修复可以选择引入第三方库
    '@vue/typescript/recommended',
    // @vue/eslint-config-prettier插件
    '@vue/prettier',
    '@vue/eslint-config-typescript',
  ],
  rules: {
    // 去除v-html被eslint所警告
    'vue/no-v-html': 'off',
    // 去除JSX等类型被eslint所警告
    'no-undef': 'off',
    // 允许在 case 子句中使用词法声明
    'no-case-declarations': 'off',
    // 不检查默认属性
    'vue/require-default-prop': 'off',
    // 关闭没有声明emits
    'vue/require-explicit-emits': 'off',
    // 关闭组件名命名规则
    'vue/multi-word-component-names': 'off',
    // 关闭any类型的警告
    '@typescript-eslint/no-explicit-any': 'off',
    // eslint规则没有开始debugger,手动放开
    'no-debugger': 'off',
    // 关闭每个函数都需要return对应type
    '@typescript-eslint/explicit-module-boundary-types': 'off',
    // 忽略默认禁止类型
    '@typescript-eslint/ban-types': 'off',
    // 使用@ts-ignore会检查报错，故添加忽略规则
    '@typescript-eslint/ban-ts-comment': 'off',
    // 关闭对empty函数的校验
    '@typescript-eslint/no-empty-function': 'off',
    // 关闭!non-null断言警告
    '@typescript-eslint/no-non-null-assertion': 'off',
    // 允许html里单标签的单闭合
    'vue/html-self-closing': [
      'error',
      {
        html: {
          void: 'always',
          normal: 'always',
          component: 'always',
        },
        svg: 'always',
        math: 'always',
      },
    ],
    // 允许类型定义但没使用
    '@typescript-eslint/no-unused-vars': [
      'error',
      {
        argsIgnorePattern: '^_',
        varsIgnorePattern: '^_',
      },
    ],
    'no-unused-vars': [
      'error',
      {
        argsIgnorePattern: '^_',
        varsIgnorePattern: '^_',
      },
    ],
    'prettier/prettier': [
      'error',
      {
        endOfLine: 'auto',
      },
    ],
    // 禁止不必要的转义字符
    'no-useless-escape': 0,
  },
};

然后来安装一些补充插件。这些插件都是规则里面所需要的，也是个人最常用的一套。

// package.json
"vue-eslint-parser": "^9.1.1",
"@typescript-eslint/parser": "^5.59.1",
"@typescript-eslint/eslint-plugin": "^5.59.1",
"@vue/eslint-config-prettier": "^7.1.0",
"@vue/eslint-config-typescript": "^11.0.2",

接着创建一个eslint忽略名单。

// .eslintignore
*.sh
node_modules
*.md
*.woff
*.ttf
.vscode
.idea
dist
/public
/docs
.husky
/src/assets
package.json
.eslintrc.js
prettier.config.js
commitlint.config.js
postcss.config.js
tailwind.config.js
stylelint.config.js

记得删掉pnpm-lock文件和node包，将prettier插件版本改为^2.8.4版本，重新install一下。
ps：降低的原因是新版prettier插件会与eslint插件起冲突导致eslint不生效，此时需要使用低版本prettier插件
再ps：如果eslint的规范文件使用eslintrc.js也会错误，新版eslint需要使用.cjs后缀的文件。
此时项目的eslint规范就配置好了，如果有语法错误会提示，保存的时候也会自动修复。

ctrl+s，可以看到eslint已经生效了，但是此时css文件还没有合适的规范。

最后删掉原有的.prettierrc.json文件新建prettier.config.cjs文件就ok了。

// prettier.config.cjs
module.exports = {
  printWidth: 100, // 行长规则
  semi: true, // 行尾添加分号
  vueIndentScriptAndStyle: true, // vue文件的script标签和Style标签下的内容需要缩进
  singleQuote: true, // 强制使用单引号
  trailingComma: 'all', // 在对象或数组最后一个元素后面是否加逗号
  proseWrap: 'never', // 代码超出是否要换行
  htmlWhitespaceSensitivity: 'strict', // 行结尾的风格
  endOfLine: 'auto', // 结尾是 \n \r \n\r auto
};

4、stylelint规范

配置完eslint，接下来规范一下style文件。
新建一下stylelint.config.cjs文件。

// https://stylelint.io/
module.exports = {
  // 在已有配置的基础上进行扩展
  extends: [
    'stylelint-config-standard',
    'stylelint-config-standard-scss',
    'stylelint-config-recommended-vue',
    'stylelint-config-recommended-vue/scss',
  ],
  // 指定需要忽略的文件,也可以通过.stylelintignore文件设置
  ignoreFiles: ['**/*.js', '**/*.ts'],
  // 默认错误级别
  defaultSeverity: 'error',
  // 自定义规则
  rules: {
    // 指定不允许使用的单位列表
    'unit-disallowed-list': ['pt'],
    // 指定缩进
    indentation: 2,
    // 不允许空源
    'no-empty-source': null,
    // 不允许空块
    'block-no-empty': null,
    // 不允许字体族中缺少通用族关键字
    'font-family-no-missing-generic-family-keyword': null,
    // 块的右大括号后需要换行符或不允许有空格,单行块中的右大括号后面必须始终有一个换行符
    'block-closing-brace-newline-after': 'always-multi-line',
    // 块的左大括号前需要换行符或不允许有空格,单行块中的左大括号前必须始终有换行符
    'block-opening-brace-newline-before': 'always-single-line',
    // 块的左大括号后需要换行符,左大括号后必须始终有换行符
    'block-opening-brace-newline-after': 'always',
    // 块的右大括号前需要换行符或不允许有空格,右大括号前必须始终有换行符
    'block-closing-brace-newline-before': 'always',
    // 指定类选择器的模式
    'selector-class-pattern':
      '^[a-z]([a-z0-9-]+)?(__([a-z0-9]+-?)+)?(__([a-z0-9]+-?)+)?(--([a-z0-9]+-?)+){0,2}$|^Mui.*$|^([a-z][a-z0-9]*)(_[a-z0-9]+)*$',

    // "scss/at-mixin-pattern": "^[a-z]([a-z0-9-]+)?(__([a-z0-9]+-?)+)?(__([a-z0-9]+-?)+)?(--([a-z0-9]+-?)+){0,2}$|^Mui.*$|^([a-z][a-z0-9]*)(_[a-z0-9]+)*$",

    // 双斜杠注释留白
    'scss/double-slash-comment-whitespace-inside': 'always',

    // 类名不允许下划线，默认kebab-case方式
    // 例如$light_gray会报错只能使用$light-gray,null即可使$light_gray可用
    'scss/dollar-variable-pattern': null,

    // 要求或禁止at-rule规则前面有空行  @media
    // https://stylelint.io/user-guide/rules/at-rule-empty-line-before/
    'at-rule-empty-line-before': [
      'always',
      {
        except: ['first-nested', 'blockless-after-same-name-blockless'],
      },
    ],

    // 自定义属性前不允许空行
    // https://stylelint.io/user-guide/rules/custom-property-empty-line-before/
    'custom-property-empty-line-before': [
      'always',
      {
        except: ['after-custom-property', 'first-nested'],
      },
    ],

    // 不允许声明前有空行
    // https://stylelint.io/user-guide/rules/declaration-empty-line-before/
    'declaration-empty-line-before': [
      'always',
      {
        except: ['after-declaration', 'first-nested'],
      },
    ],

    // 禁止块的右大括号前有空行
    'block-closing-brace-empty-line-before': 'never',

    // 未知的@xxx忽略
    'scss/at-rule-no-unknown': [
      true,
      {
        ignoreAtRules: ['tailwind', 'mixin', 'use'],
      },
    ],
    // 指定媒体功能范围的上下文或前缀表示法
    'media-feature-range-notation': null,
  },
};

我们直接在package.json文件里添加对应依赖，记得加在devDependencies下面。

// package.json
"stylelint": "^15.10.0",
"stylelint-config-recommended-scss": "^12.0.0",
"stylelint-config-recommended-vue": "^1.4.0",
"stylelint-config-standard": "^33.0.0",
"stylelint-config-standard-scss": "9.0.0",
"sass-embedded": "^1.77.8",

删掉-lock文件和node包，重新install一下。
然后新建.stylelintignore忽略名单。

//.stylelintignore
/dist/*
/public/*
public/*
node_modules

测试一下css规范有没有生效。
新建一个ceshi.css文件。

ctrl+s，可以看到css规范已经生效了

5、postcss配置

顺便把postcss也配置一下。

// package.json
"postcss": "^8.4.23",
"postcss-html": "^1.5.0",
"postcss-scss": "^4.0.6",
"autoprefixer": "^10.4.14",

新建postcss.config.cjs文件

// postcss.config.cjs
module.exports = {
  plugins: {
    autoprefixer: {},
  },
};

结语

先写到这里，后面还要配置很多东西。未完待续…
如果想查看完整代码，可以去我的github仓库：hp-vue-ui，有兴趣可以点个star支持一下。