坏蛋格鲁安装所需依赖（20 个依赖项）
pnpm add -D globals @types/node eslint @eslint/js typescript-eslint @stylistic/eslint-plugin vue-eslint-parser eslint-plugin-vue prettier eslint-config-prettier eslint-plugin-prettier postcss postcss-html sass-embedded stylelint stylelint-config-recommended-vue stylelint-config-standard stylelint-config-standard-scss @vitejs/plugin-vue-jsx vite-plugin-stylelint unplugin-auto-import- globals
- @types/node
- eslint
- @eslint/js
- typescript-eslint
- @stylistic/eslint-plugin
- vue-eslint-parser
- eslint-plugin-vue
- prettier
- eslint-config-prettier
- eslint-plugin-prettier
- postcss
- postcss-html
- sass-embedded
- stylelint
- stylelint-config-recommended-vue
- stylelint-config-standard
- stylelint-config-standard-scss
- @vitejs/plugin-vue-jsx
- vite-plugin-stylelint
unplugin-auto-import
Vscode 编辑器设置
// .vscode/setting.json { "eslint.validate": [ "javascript", "typescript", "typescriptreact", "vue", "vue-html", "html", "css", "scss", "less", "json", "jsonc", "json5", "markdown" ], "stylelint.validate": [ "css", "less", "scss", "vue" ], }package.json 的 script 脚本项中添加脚本指令
// package.json "scripts": { "lint": "eslint", "lint:fix": "eslint --fix", "lint:css": "stylelint **/*.{vue,css,sass,scss} --fix", "prettier:c": "prettier --check .", "prettier:w": "prettier --write ." }eslint 配置
// eslint.config.js import fs from 'fs' import path from 'path' import { fileURLToPath } from 'url' import globals from 'globals' import jseslint from '@eslint/js' import tseslint from 'typescript-eslint' import pluginVue from 'eslint-plugin-vue' import VueEslintParser from 'vue-eslint-parser' import stylistic from '@stylistic/eslint-plugin' import eslintPluginPrettierRecommended from 'eslint-plugin-prettier/recommended' // 自 9.0 以来，eslint 不再有格式化规则，typescript 的主要维护者在他的文章 "You Probably Don't Need eslint-config-prettier or eslint-plugin-prettier" 中建议不要使用 `eslint-config-prettier`。 // import eslintConfigPrettier from 'eslint-config-prettier' // 获取当前文件的目录路径 const __filename = fileURLToPath(import.meta.url) const __dirname = path.dirname(__filename) // 读取 .eslintrc-auto-import.json 文件 // 导入到全局，用于 ts 自动识别 // .eslintrc-auto-import.json 来自 vite 插件 unplugin-auto-import // unplugin-auto-import 插件作用自动导入预设库的 API，在使用的地方不在需要手动 import 导入 // 具体配置在 vite.config.ts ，如果没有使用 unplugin-auto-import 这里配置可以忽略 const autoImportPath = path.resolve(__dirname, 'src/types/.eslintrc-auto-import.json') const autoImportConfig = JSON.parse(fs.readFileSync(autoImportPath, 'utf8')) export default [ /** 作用文件与排除文件 */ { ignores: ['node_modules/', 'dist/', '**/*.d.ts', 'public/'], }, { files: ['src/**/*.{js,mjs,cjs,ts,mts,jsx,tsx,vue}'], }, /** js推荐配置 */ jseslint.configs.recommended, /** ts推荐配置 */ ...tseslint.configs.recommended, /** vue推荐配置 */ ...pluginVue.configs['flat/recommended'], /** 提供更多的typescript和JavaScript的语法风格规则 */ stylistic.configs.customize({ indent: 4, quotes: 'single', semi: false, jsx: true, braceStyle: '1tbs', arrowParens: 'always', }), /** 配置全局变量 */ { languageOptions: { globals: { ...globals.browser, ...globals.node, ...autoImportConfig.globals, // 合并自动导入的 globals }, }, }, /** javascript 规则 */ { files: ['**/*.{js,mjs,cjs,vue}'], rules: { // 允许 ESLint 直接运行 Prettier 并将结果作为 ESLint 规则来报告 // "prettier/prettier": "error" // eslint（https://eslint.bootcss.com/docs/rules/） 'no-var': 'error', // 要求使用 let 或 const 而不是 var 'no-multiple-empty-lines': ['warn', { max: 1 }], // 不允许多个空行 'no-unexpected-multiline': 'error', // 禁止空余的多行 'no-useless-escape': 'off', // 禁止不必要的转义字符 'no-console': 'warn', // 警告 console 信息 }, }, /** typescript 规则 */ { files: ['**/*.{ts,tsx,vue}'], rules: { // typeScript (https://typescript-eslint.io/rules) '@typescript-eslint/no-unused-vars': 'error', // 禁止定义未使用的变量 '@typescript-eslint/prefer-ts-expect-error': 'error', // 禁止使用 @ts-ignore '@typescript-eslint/no-explicit-any': 'off', // 禁止使用 any 类型 '@typescript-eslint/no-non-null-assertion': 'off', '@typescript-eslint/no-namespace': 'off', // 禁止使用自定义 TypeScript 模块和命名空间。 '@typescript-eslint/semi': 'off', // 禁止结尾使用分号 '@typescript-eslint/no-unsafe-function-type': 'off', // 禁止使用 Function 作为 type。 }, }, /** vue 规则 */ { files: ['**/*.vue'], languageOptions: { parser: VueEslintParser, parserOptions: { /** typescript项目需要用到这个 */ parser: tseslint.parser, ecmaVersion: 'latest', /** 允许在.vue 文件中使用 JSX */ ecmaFeatures: { jsx: true, }, }, }, rules: { // 在这里追加 vue 规则 // eslint-plugin-vue (https://eslint.vuejs.org/rules/) 'vue/multi-word-component-names': 'off', // 要求组件名称始终为 “-” 链接的单词 'vue/script-setup-uses-vars': 'error', // 防止<script setup>使用的变量<template>被标记为未使用 'vue/no-mutating-props': 'off', // 不允许组件 prop的改变 'vue/attribute-hyphenation': 'off', // 对模板中的自定义组件强制执行属性命名样式 }, }, /** * prettier 配置 * 会合并根目录下的.prettier.config.js 文件 * @see https://prettier.io/docs/en/options */ eslintPluginPrettierRecommended, ]prettier 设置
// prettier.config.js /** * @see https://prettier.io/docs/en/configuration.html * @type {import("prettier").Config} */ const config = { trailingComma: 'all', singleQuote: true, semi: false, printWidth: 120, arrowParens: 'always', proseWrap: 'always', endOfLine: 'auto', experimentalTernaries: false, tabWidth: 4, useTabs: false, quoteProps: 'consistent', jsxSingleQuote: false, bracketSpacing: true, bracketSameLine: false, jsxBracketSameLine: false, vueIndentScriptAndStyle: false, singleAttributePerLine: false, } export default configstylelint 配置
// .stylelintrc.cjs module.exports = { extends: ['stylelint-config-standard', 'stylelint-config-standard-scss', 'stylelint-config-recommended-vue/scss'], overrides: [ { files: ['*.scss', '**/*.scss'], customsyntax: 'postcss-scss', extends: ['stylelint-configFrecommended-scss'], }, ], }
// .stylelintignore
/dist/*
/public/*vite 项目设置
// vite.config.ts import path from 'path' import { defineConfig } from 'vite' import vue from '@vitejs/plugin-vue' import vueJsx from '@vitejs/plugin-vue-jsx' import stylelintPlugin from 'vite-plugin-stylelint' import AutoImport from 'unplugin-auto-import/vite' // https://vitejs.dev/config/ export default defineConfig({ plugins: [ vue(), vueJsx({ transformOn: true, mergeProps: true, }), stylelintPlugin(), AutoImport({ // 插件预设支持导入的api imports: ['vue', 'vue-router', 'pinia'], // 生成 TypeScript 类型声明文件的路径。 // 初次设置路径，启用生成，生成一次就可以，避免每次工程启动都生成，一旦生成自动导入文件之后，最好关闭自动导入文件的生成，即改成 false // 文件 auto-imports.d.ts 将包含所有自动导入的类型声明。 // dts: 'src/types/auto-imports.d.ts', dts: false, // 设置为 true，表示支持在 Vue 模板中自动导入。 vueTemplate: true, // 设置为 true，表示自动导入的依赖将被 Vite 优化。 viteOptimizeDeps: true, // ESLint 相关的设置 eslintrc: { // 启用 ESLint 配置生成。如果设置为 true，将根据自动导入的配置生成 ESLint 配置文件 // 默认 false, true 启用生成。生成一次就可以，避免每次工程启动都生成，一旦生成配置文件之后，最好把 enable 关掉，即改成 false。 // 否则这个文件每次会在重新加载的时候重新生成，这会导致 eslint 有时会找不到这个文件。当需要更新配置文件的时候，再重新打开 enabled: false, // 生成的 ESLint 配置文件的路径 // 文件 .eslintrc-auto-import.json 将包含 ESLint 的设置 filepath: 'src/types/.eslintrc-auto-import.json', // 自动导入的模块设置全局变量的属性值 // 将其设置为 true，意味着这些自动导入的模块在 ESLint 配置中将作为全局变量进行处理。 globalsPropValue: true, }, }), ], resolve: { // 为 src 目录设置一个别名 @ alias: { '@': path.resolve(__dirname, 'src'), }, }, })typescript 配置
// tsconfig.app.json { "compilerOptions": { ... // 项目初始化时的初始默认配置选项 // 下边为更新项目内容 "baseUrl": "./", "paths": { "@/*": ["src/*"] } }, "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"] }