基于vite创建的vue项目配置一个eslint，pritter，stylelint的校验

首先根据如下命创建一个vue项目，参见官网示例vite官网，因为我这用的pnpm所以后续都是pnpm操作

pnpm create vite my-vue-app -- --template vue

根据提示一步步操作之后我选的vue项目和Typescript，目录如下

项目
├── README.md
├── index.html
├── package.json
├── public
│   └── vite.svg
├── src
│   ├── App.vue
│   ├── assets
│   │   └── vue.svg
│   ├── components
│   │   └── HelloWorld.vue
│   ├── main.ts
│   ├── style.css
│   └── vite-env.d.ts
├── tsconfig.app.json
├── tsconfig.json
├── tsconfig.node.json
└── vite.config.ts

第一步配置eslint

参考eslint配置，输入命令 pnpm create @eslint/config,根据自己的需求选择，我选的是 vue，ts，浏览器运行，确定之后自动安装了这些包

• @eslint/js 9.9.1
• @vitejs/plugin-vue 5.1.2
• eslint 9.9.1
• eslint-plugin-vue 9.27.0
• globals 15.9.0
• typescript 5.5.4
• typescript-eslint 8.3.0
• vite 5.4.2
• vue-tsc 2.1.0

此时根目录下多了一个eslint.config.js文件这个是eslint 9版本及其以上的版本支持的配置文件，之前版本的是.eslintrc.js这个后续应该要被淘汰

pnpm install --save-dev vite-plugin-eslint 在vite.config.js中配置

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import eslintPlugin from 'vite-plugin-eslint'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    eslintPlugin()
  ],
})

接下来就是根据自己的需求在eslint.config.js文件中配置相应规则

eslint.config.js如下

import globals from "globals";
import pluginJs from "@eslint/js";
import tseslint from "typescript-eslint";
import pluginVue from "eslint-plugin-vue";

export default [
  {ignores:['public']},//忽略哪些文件检测
  {files: ["**/*.{js,mjs,cjs,ts,vue}"]},
  {languageOptions: { globals: globals.browser }},
  pluginJs.configs.recommended,
  ...tseslint.configs.recommended,
  ...pluginVue.configs["flat/essential"],
  {files: ["**/*.vue"], languageOptions: {parserOptions: {parser: tseslint.parser}}},
  //下面规则是根据我们自己定义覆盖上去的，只列出了两个作为调试使用，后续更多的规则请参考官网配置
  {
    rules: {
      // eslint（https://eslint.bootcss.com/docs/rules/）
      'no-var': 'warn', // 要求使用 let 或 const 而不是 var
      'no-multiple-empty-lines': ['warn', { max: 1 }], // 不允许多个空行
      ...其他规则
    },
  },
];

这会启动项目运行，在某个vue文件里面用var定义js或者多打几个空的行会警告你出错，截图有水印不方便所以就不截图看效果了。

运行时检测好像按需检测，没引用是不会去检测的。。。

第二步配置stylelint

参考stylelint配置，新增stylelint.config.js文件

stylelint.config.js如下

export default {
  // 继承已有配置 如果规则与自己想要的冲突 可以在下面rules中修改规则
  extends: [
    'stylelint-config-standard',
    'stylelint-config-standard-scss',
    'stylelint-config-sass-guidelines',
  ],
  // 插件是由社区创建的规则或规则集 按照规则对CSS属性进行排序
  plugins: [
    // 执行各种各样的 SCSS语法特性检测规则(插件包)
    'stylelint-scss',
    // 指定排序，比如声明的块内(插件包)属性的顺序
    'stylelint-order',
  ],
  // customSyntax: 'postcss-html',
  rules: {
    // 允许的最大嵌套深度为 3
    'max-nesting-depth': 3,
    // 屏蔽一些scss等语法检查
    'at-rule-no-unknown': [
      true,
      {
        ignoreAtRules: [
          'extend',
          'at-root',
          'debug',
          'warn',
          'error',
          'if',
          'else',
          'for',
          'each',
          'while',
          'mixin',
          'include',
          'content',
          'return',
          'function',
        ],
      },
    ],
    // 屏蔽没有申明通用字体
    'font-family-no-missing-generic-family-keyword': null,
    // ID选择器 最多使用一个
    'selector-max-id': 1,
    // 不允许使用的选择器的类型
    'selector-no-qualifying-type': null,
    // 屏蔽类选择器的检查，以确保使用字符 __
    'selector-class-pattern': null,
    // 允许的最大复合选择器为 5
    'selector-max-compound-selectors': 5,
    // 屏蔽属性按字母顺序检查
    'order/properties-alphabetical-order': null,
  },

  overrides: [
    {
      files: ['**/*.(css|html|vue)'],
      customSyntax: 'postcss-html',
    },
    {
      files: ['*.less', '**/*.less'],
      customSyntax: 'postcss-less',
      extends: ['stylelint-config-standard', 'stylelint-config-recommended-vue'],
    },
    {
      files: ['*.scss', '**/*.scss'],
      customSyntax: 'postcss-scss',
      extends: ['stylelint-config-standard-scss', 'stylelint-config-recommended-vue/scss'],
      rule: {
        'scss/percent-placeholder-pattern': null,
      },
    },
  ],
};

需要安装

• stylelint
• stylelint-config-standard
• stylelint-config-standard-scss
• postcss-html
• stylelint-config-sass-guidelines
• stylelint-scss
• stylelint-order
• stylelint-config-recommended-vue
• stylelint-config-recommended-scss
• postcss-less
• postcss-scss

.stylelintignore如下

public
dist

prettier网站根据文档可安装预配置prettier

• prettier

.prettier.config.js如下

const config = {
  tabWidth: 2,
  useTabs: false,
  printWidth: 100,
  semi: true,
  vueIndentScriptAndStyle: true,
  singleQuote: true,
  trailingComma: 'all',
  proseWrap: 'never',
  htmlWhitespaceSensitivity: 'strict',
  endOfLine: 'auto',
};

export default config;

.prettierignore如下

/dist/*
.local
.output.js
/node_modules/**

**/*.svg
**/*.sh

/public/*

基本配置ok了，除了eslint运行时检测，其他两准备配置成git 提交时检测，先git初始化

第三步配置git hooks提交

npx mrm@2 lint-staged

This will install husky and lint-staged

进入commitlint根据文档安装

pnpm install --save-dev @commitlint/config-conventional @commitlint/cli

根据代码创建 echo "export default { extends: ['@commitlint/config-conventional'] };" > commitlint.config.js文件

生成commit-msg文件echo "pnpm dlx commitlint --edit \$1" > .husky/commit-msg

设置commitlint指令在package.json文件中npm pkg set scripts.commitlint="commitlint --edit"

commit-msg文件如下

#!/bin/sh

# shellcheck source=./_/husky.sh
. "$(dirname "$0")/_/husky.sh"

PATH="/usr/local/bin:$PATH"

npx --no-install commitlint --edit "$1"

配置之后文件commitlint.config.js

export default { 
    extends: ['@commitlint/config-conventional'],
    rules: {
        'body-leading-blank': [2, 'always'],
        'footer-leading-blank': [1, 'always'],
        'header-max-length': [2, 'always', 108],
        'subject-empty': [2, 'never'],
        'type-empty': [2, 'never'],
        'subject-case': [0],
        'type-enum': [
          2,
          'always',
          [
            'feat',
            'fix',
            'perf',
            'style',
            'docs',
            'test',
            'refactor',
            'build',
            'ci',
            'chore',
            'revert',
            'wip',
            'workflow',
            'types',
            'release',
          ],
        ],
      },
};

最终package.json中lint-staged部分如下

"lint-staged": {
    "*.{js,jsx,ts,tsx}": [
      "eslint --fix",
      "prettier --write"
    ],
    "*.vue": [
      "eslint --fix",
      "prettier --write",
      "stylelint --fix"
    ],
    "*.{scss,css,less}": [
      "stylelint --fix",
      "prettier --write"
    ]
  }

只是感觉没啥事情了写着玩玩，每一个配置项都可以去参考对应官网文档，可能排版布局不太好看，但是之前也很少些这些东西，临时兴趣来了写着玩玩，忘见谅。当然有见解的大佬当然可以指导指导小弟我。谢谢