有来团队后台项目-解析4

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

---

一、配置prettier 校验规则

安装prettier

pnpm install -D eslint-plugin-prettier prettier eslint-config-prettier

新建.prettierrc.cjs文件

```cpp
module.exports = {
  // (x)=>{},单个参数箭头函数是否显示小括号。(always:始终显示;avoid:省略括号。默认:always)
  arrowParens: "always",
  // 开始标签的右尖括号是否跟随在最后一行属性末尾，默认false
  bracketSameLine: false,
  // 对象字面量的括号之间打印空格 (true - Example: { foo: bar } ; false - Example: {foo:bar})
  bracketSpacing: true,
  // 是否格式化一些文件中被嵌入的代码片段的风格(auto|off;默认auto)
  embeddedLanguageFormatting: "auto",
  // 指定 HTML 文件的空格敏感度 (css|strict|ignore;默认css)
  htmlWhitespaceSensitivity: "css",
  // 当文件已经被 Prettier 格式化之后，是否会在文件顶部插入一个特殊的 @format 标记，默认false
  insertPragma: false,
  // 在 JSX 中使用单引号替代双引号，默认false
  jsxSingleQuote: false,
  // 每行最多字符数量，超出换行(默认80)
  printWidth: 80,
  // 超出打印宽度 (always | never | preserve )
  proseWrap: "preserve",
  // 对象属性是否使用引号(as-needed | consistent | preserve;默认as-needed:对象的属性需要加引号才添加;)
  quoteProps: "as-needed",
  // 是否只格式化在文件顶部包含特定注释(@prettier| @format)的文件，默认false
  requirePragma: false,
  // 结尾添加分号
  semi: true,
  // 使用单引号 (true:单引号;false:双引号)
  singleQuote: false,
  // 缩进空格数，默认2个空格
  tabWidth: 2,
  // 元素末尾是否加逗号，默认es5: ES5中的 objects, arrays 等会添加逗号，TypeScript 中的 type 后不加逗号
  trailingComma: "es5",
  // 指定缩进方式，空格或tab，默认false，即使用空格
  useTabs: false,
  // vue 文件中是否缩进 <style> 和 <script> 标签，默认 false
  vueIndentScriptAndStyle: false,

  endOfLine: "auto",
  overrides: [
    {
      files: "*.html",
      options: {
        parser: "html",
      },
    },
  ],
};

新建.prettierignore

// .prettierignore 内容
dist
node_modules
public
.husky
.vscode
.idea
*.sh
*.md

src/assets
stats.html

二、配置eslint

安装eslint

pnpm i eslint -D

生成eslint 配置文件

pnpm eslint --init

配置.eslintrc.cjs

module.exports = {
  root: true,
  env: {
    browser: true,
    es2021: true,
    node: true,
  },
  parser: "vue-eslint-parser",
  extends: [
    // https://eslint.vuejs.org/user-guide/#usage
    "plugin:vue/vue3-recommended",
    "./.eslintrc-auto-import.json",
    "prettier",
    "plugin:@typescript-eslint/recommended",
    "plugin:prettier/recommended",
  ],
  parserOptions: {
    ecmaVersion: "latest",
    sourceType: "module",
    parser: "@typescript-eslint/parser",
    project: "./tsconfig.*?.json",
    createDefaultProgram: false,
    extraFileExtensions: [".vue"],
  },
  plugins: ["vue", "@typescript-eslint"],
  rules: {
    // https://eslint.vuejs.org/rules/#priority-a-essential-error-prevention
    "vue/multi-word-component-names": "off",
    "vue/no-v-model-argument": "off",
    "vue/script-setup-uses-vars": "error",
    "vue/no-reserved-component-names": "off",
    "vue/custom-event-name-casing": "off",
    "vue/attributes-order": "off",
    "vue/one-component-per-file": "off",
    "vue/html-closing-bracket-newline": "off",
    "vue/max-attributes-per-line": "off",
    "vue/multiline-html-element-content-newline": "off",
    "vue/singleline-html-element-content-newline": "off",
    "vue/attribute-hyphenation": "off",
    "vue/require-default-prop": "off",
    "vue/require-explicit-emits": "off",
    "vue/html-self-closing": [
      "error",
      {
        html: {
          void: "always",
          normal: "never",
          component: "always",
        },
        svg: "always",
        math: "always",
      },
    ],

    "@typescript-eslint/no-empty-function": "off", // 关闭空方法检查
    "@typescript-eslint/no-explicit-any": "off", // 关闭any类型的警告
    "@typescript-eslint/no-non-null-assertion": "off",
    "@typescript-eslint/ban-ts-ignore": "off",
    "@typescript-eslint/ban-ts-comment": "off",
    "@typescript-eslint/ban-types": "off",
    "@typescript-eslint/explicit-function-return-type": "off",
    "@typescript-eslint/no-explicit-any": "off",
    "@typescript-eslint/no-var-requires": "off",
    "@typescript-eslint/no-empty-function": "off",
    "@typescript-eslint/no-use-before-define": "off",
    "@typescript-eslint/no-non-null-assertion": "off",
    "@typescript-eslint/explicit-module-boundary-types": "off",
    "@typescript-eslint/no-unused-vars": "off",

    "prettier/prettier": [
      "error",
      {
        useTabs: false, // 不使用制表符
      },
    ],
  },
  // eslint不能对html文件生效
  overrides: [
    {
      files: ["*.html"],
      processor: "vue/.vue",
    },
  ],
  // https://eslint.org/docs/latest/use/configure/language-options#specifying-globals
  globals: {
    OptionType: "readonly",
  },
};

配置.eslintignore

dist
node_modules
public
.husky
.vscode
.idea
*.sh
*.md

src/assets

.eslintrc.cjs
.prettierrc.cjs
.stylelintrc.cjs

重新配置vite.config.ts

安装了eslint ，那么可以在AutoImport 中自动导入

      AutoImport({
        // 自动导入 Vue 相关函数，如：ref, reactive, toRef 等
        imports: ["vue", "pinia", "vue-router"],
        resolvers: [
          // 自动导入 Element Plus 相关函数，如：ElMessage, ElMessageBox... (带样式)
          ElementPlusResolver(),
        ],
        eslintrc: {
          enabled: false, //  默认 false, true 启用生成。生成一次就可以，避免每次工程启动都生成，一旦生成配置文件之后，最好把 enable 关掉，即改成 false。
          //  否则这个文件每次会在重新加载的时候重新生成，这会导致 eslint 有时会找不到这个文件。当需要更新配置文件的时候，再重新打开
          filepath: "./.eslintrc-auto-import.json",
          // 默认就是 ./.eslintrc-auto-import.json
          globalsPropValue: true,
        },
        vueTemplate: true, // 默认 true 是否在vue 模版中自动导入
        dts: resolve(pathSrc, "typings", "auto-import.d.ts"), //  自动导入组件类型声明文件位置，默认根目录
      }),

安装@types/node

执行命令：

pnpm i @types/node -D

解决
vite.config.ts 爆红线问题

const pathSrc = resolve(__dirname, "src");

三、路径别名配置

alias

vite.config.ts

    resolve: {
      alias: {
        "@": pathSrc,
      },
    },

tsconfig.json 中也要添加

{
   ...
    "paths": {
      "@/*": ["src/*"]
    },

   ...
  "include": [
    "src/**/*.ts",
    "src/**/*.vue",
    "src/typings/**/*.d.ts",
    "mock/**/*.ts",
    "vite.config.ts"
  ],
   ...
}

四、配置支持jsx

安装

pnpm i @vitejs/plugin-vue-jsx -D 

使用

vite.config.ts 中进行配置

import vueJsx from "@vitejs/plugin-vue-jsx"; // 配置vue使用jsx

export default defineConfig({plugins: [vue(), vueJsx()],
}); 

五、配置styelint

安装stylelint

pnpm add sass sass-loader stylelint postcss postcss-scss postcss-html stylelint-config-prettier stylelint-config-recess-order stylelint-config-recommended-scss stylelint-config-standard stylelint-config-standard-vue stylelint-scss stylelint-order stylelint-config-standard-scss -D

新建styleint 配置文件

.stylelintrc.cjs

module.exports = {
  // 继承推荐规范配置
  extends: [
    "stylelint-config-standard", // 配置stylelint拓展插件
    "stylelint-config-recommended-scss", // 配置规则检查
    "stylelint-config-recommended-vue/scss", // 配置 vue 中 scss 样式格式化
    "stylelint-config-html/vue", // 配置 vue 中 template 样式格式化
    "stylelint-config-recess-order", // 配置stylelint css属性书写顺序插件,
  ],
  // 指定不同文件对应的解析器
  overrides: [
    {
      files: ["**/*.{vue,html}"],
      customSyntax: "postcss-html",
    },
    {
      files: ["**/*.{css,scss}"],
      customSyntax: "postcss-scss",
    },
  ],
  // 自定义规则
  rules: {
    "import-notation": "string", // 指定导入CSS文件的方式("string"|"url")
    "selector-class-pattern": null, // 选择器类名命名规则
    "custom-property-pattern": null, // 自定义属性命名规则
    "keyframes-name-pattern": null, // 动画帧节点样式命名规则
    "no-descending-specificity": null, // 允许无降序特异性
    "no-empty-source": null, // 允许空样式
    // 允许 global 、export 、deep伪类
    "selector-pseudo-class-no-unknown": [
      true,
      {
        ignorePseudoClasses: ["global", "export", "deep"],
      },
    ],
    // 允许未知属性
    "property-no-unknown": [
      true,
      {
        ignoreProperties: [],
      },
    ],
    // 允许未知规则
    "at-rule-no-unknown": [
      true,
      {
        ignoreAtRules: ["apply", "use"],
      },
    ],
  },
};

新建styleint 忽略文件

.stylelintignore

dist
node_modules
public
.husky
.vscode
.idea
*.sh
*.md

src/assets
stats.html

统一配置脚本

package.json

  "scripts": {
    "dev": "vite",
    "build": "vue-tsc && vite build",
    "preview": "vite preview",
    "lint:eslint": "eslint  --fix --ext .ts,.js,.vue ./src ",
    "lint:prettier": "prettier --write \"**/*.{js,cjs,ts,json,tsx,css,less,scss,vue,html,md}\"",
    "lint:stylelint": "stylelint  \"**/*.{css,scss,vue}\" --fix"
  },

检验

PS F:\company_project\demo\youlahoutaijiexi\vite-project> pnpm run lint:prettier                                                                                               

> vite-project@0.0.0 lint:prettier F:\company_project\demo\youlahoutaijiexi\vite-project
> prettier --write "**/*.{js,cjs,ts,json,tsx,css,less,scss,vue,html,md}"

.eslintrc-auto-import.json 28ms (unchanged)
.eslintrc.cjs 12ms (unchanged)
.prettierrc.cjs 4ms (unchanged)
.stylelintrc.cjs 4ms (unchanged)
index.html 19ms (unchanged)
package-lock.json 18ms (unchanged)
package.json 1ms (unchanged)
src/App.vue 124ms (unchanged)
src/components/HelloWorld.vue 8ms (unchanged)
src/main.ts 2ms (unchanged)
src/style.css 5ms (unchanged)
src/typings/auto-import.d.ts 56ms (unchanged)
src/typings/components.d.ts 2ms (unchanged)
src/vite-env.d.ts 2ms (unchanged)
tsconfig.json 8ms (unchanged)
vite.config.ts 8ms (unchanged)
PS F:\company_project\demo\youlahoutaijiexi\vite-project> pnpm run lint:eslint  

> vite-project@0.0.0 lint:eslint F:\company_project\demo\youlahoutaijiexi\vite-project
> eslint  --fix --ext .ts,.js,.vue ./src
PS F:\company_project\demo\youlahoutaijiexi\vite-project> pnpm run lint:stylelint

> vite-project@0.0.0 lint:stylelint F:\company_project\demo\youlahoutaijiexi\vite-project
> stylelint  "**/*.{css,scss,vue}" --fix

---

总结