相信还是有非常多的小伙伴使用着公司的框架，封装的“很好用”，但是一离开公司就一头雾水瞬间打回原形，那么现在一起来动手搭建一下吧。~（笑鼠）

6.0.安装eslint pnpm i eslint -D

按照默认配置走即可

6.1.配置.eslintignore -- 不参与校验文件

node_modules
dist
public
pnpm-lock.yaml

6.2.安装prettier pnpm i prettier -D

6.2.1..prettierrc.js文件名调整为.prettierrc.cjs，因为vite脚手架搭出来的package.json文件内的type默认为module，需改成CommonJs类型

6.2.2.配置.prettierignore -- 不参与校验文件

node_modules
dist
public

6.2.2.配置.prettierrc.cjs 可根据自己需求进行调整

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

6.3.配置自动保存及校验

.vscode -> settings.json

{
  "editor.formatOnSave": true,
  "npm.packageManager": "pnpm",
  "eslint.probe": [
    "javascript",
    "javascriptreact",
    "typescript",
    "typescriptreact",
    "html",
    "vue",
    "markdown",
    "json",
    "jsonc"
  ],
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    "typescript",
    "typescriptreact",
    "html",
    "vue",
    "markdown",
    "json",
    "jsonc"
  ],
  "editor.defaultFormatter": "esbenp.prettier-vscode"
}

6.3.1.实际保存发现.js文件没问题 但是.vue文件无效,这里需要补充针对.vue参与格式化

{
  "editor.formatOnSave": true,
  "npm.packageManager": "pnpm",
  "eslint.probe": [
    "javascript",
    "javascriptreact",
    "typescript",
    "typescriptreact",
    "html",
    "vue",
    "markdown",
    "json",
    "jsonc"
  ],
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    "typescript",
    "typescriptreact",
    "html",
    "vue",
    "markdown",
    "json",
    "jsonc"
  ],
  // 我是补充的！！！
  "[vue]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "editor.defaultFormatter": "esbenp.prettier-vscode"
}

现在保存就可以正常格式和样式自动处理了

6.4.安装stylelint pnpm i stylelint stylelint-config-prettier stylelint-config-recommended-vue -D

stylelint-config-prettier stylelint-config-recommended-vue 是用来识别vue文件和配合prettier使用

6.4.1.配置.stylelintrc.cjs文件

module.exports = {
    extends: ["stylelint-config-recommended-vue", "stylelint-config-prettier"],
}

现在你的项目已经可以进行保存时自动校验eslint和代码及样式格式化

demo地址：yzh940324/my-vue-app-demo (githubfast.com)