【vue3前端工程化】eslint+prettier+stylelint代码格式化

一、准备环境

node：v22.11.0
yarn：1.22.22
npm ：10.9.0
vue：3.5.13

二、安装依赖

// eslint  + prettier 
yarn add @eslint/js eslint eslint-config-prettier eslint-plugin-prettier eslint-plugin-vue globals prettier typescript-eslint vue-eslint-parser  -D

// stylelint 
yarn add stylelint stylelint-config-standard stylelint-config-recommended-scss stylelint-config-recommended-vue postcss postcss-html postcss-scss stylelint-config-recess-order stylelint-config-html -D

三、package.json配置

{
"scripts": {
    ...
    "lint": "eslint --cache  \"src/**/*.{vue,ts}\" --fix", // eslint 格式化
    "format": "prettier --write \"**/*.{js,cjs,ts,json,css,scss,vue,html,md}\"", // prettier格式化
    "lint:stylelint": "stylelint  \"**/*.{css,scss,vue,html}\" --fix" // stylelint格式化
  },
"config": {
    "commitizen": {
      "path": "node_modules/cz-git"
    }
  },
  "lint-staged": {
    "*.{js,ts}": [
      "eslint --fix",
      "prettier --write"
    ],
    "*.{cjs,json}": [
      "prettier --write"
    ],
    "*.{vue,html}": [
      "eslint --fix",
      "prettier --write",
      "stylelint --fix --allow-empty-input"
    ],
    "*.{scss,css}": [
      "stylelint --fix --allow-empty-input",
      "prettier --write"
    ]
  },
}

四、eslint配置

在根目录添加eslint.config.js文件，内容为：

import globals from 'globals';
import eslint from '@eslint/js';
import tseslint from 'typescript-eslint';
import eslintPluginVue from 'eslint-plugin-vue';
import vueParser from 'vue-eslint-parser';
import eslintPluginPrettierRecommended from 'eslint-plugin-prettier/recommended';

export default [
  {
    ignores: [
      'node_modules',
      'dist',
      '.gitignore',
      'package.json',
      'package-lock.json',
      'dist-ssr',
      '*.local',
      '.npmrc',
      '.DS_Store',
      'dev-dist',
      'dist_electron',
      '*.d.ts',
      'src/assets/**',
    ],
  },
  /** js推荐配置 */
  eslint.configs.recommended,
  /** vue推荐配置 */
  ...eslintPluginVue.configs['flat/recommended'],
  /** prettier 配置 */
  eslintPluginPrettierRecommended,

  //javascript 规则
  {
    files: ['**/*.{js,mjs,cjs,vue,ts}'],
    rules: {
      // 对象结尾逗号
      'comma-dangle': 'off',

      // 关闭未定义变量
      'no-undef': 'off',

      // 确保 Prettier 的行为不会被 ESLint 覆盖
      quotes: [
        'error',
        'single',
        {
          allowTemplateLiterals: true,
        },
      ],

      // 关闭对未定义变量的警告
      'no-undefined': 'off',

      //不使用的变量不报错
      'no-unused-vars': 'off',

      // 禁止使用不规范的空格
      'no-irregular-whitespace': 'off',

      // 函数括号前的空格
      'space-before-function-paren': 0,

      // 箭头函数的空格
      'arrow-spacing': [
        2,
        {
          before: true,
          after: true,
        },
      ],

      // 代码块的空格
      'block-spacing': [2, 'always'],

      // 大括号风格
      'brace-style': [
        2,
        '1tbs',
        {
          allowSingleLine: true,
        },
      ],

      // 对象属性换行
      'object-property-newline': 'off',

      // JSX 引号风格
      'jsx-quotes': [2, 'prefer-single'],

      // 对象键值对之间的空格
      'key-spacing': [
        2,
        {
          beforeColon: false,
          afterColon: true,
        },
      ],

      // 关键字之间的空格
      'keyword-spacing': [
        2,
        {
          before: true,
          after: true,
        },
      ],

      // 构造函数首字母大写
      'new-cap': [
        2,
        {
          newIsCap: true,
          capIsNew: false,
        },
      ],

      // new 操作符使用时需要括号
      'new-parens': 2,

      // 禁止使用 Array 构造函数
      'no-array-constructor': 2,

      // 禁止调用 caller 和 callee
      'no-caller': 2,

      // 禁止重新分配类名
      'no-class-assign': 2,

      // 禁止条件中的赋值操作
      'no-cond-assign': 2,

      // 禁止 const 重新分配
      'no-const-assign': 2,

      // 正则表达式中的控制字符
      'no-control-regex': 0,

      // 禁止删除变量
      'no-delete-var': 2,

      // 禁止在函数参数中使用重复名称
      'no-dupe-args': 2,

      // 禁止在类中使用重复名称的成员
      'no-dupe-class-members': 2,

      // 禁止在对象字面量中使用重复的键
      'no-dupe-keys': 2,

      // 禁止重复的 case 标签
      'no-duplicate-case': 2,

      // 禁止空的字符类
      'no-empty-character-class': 2,

      // 禁止空的解构模式
      'no-empty-pattern': 2,

      // 禁止使用 eval
      'no-eval': 2,

      // 不允许出现空的代码块
      'no-empty': 2,

      // 禁止不必要的布尔转换
      'no-extra-boolean-cast': 2,

      // 禁止不必要的括号
      'no-extra-parens': [2, 'functions'],

      // 禁止 case 语句落空
      'no-fallthrough': 2,

      // 禁止在数字后面添加小数点
      'no-floating-decimal': 2,

      // 禁止对函数声明重新赋值
      'no-func-assign': 2,

      // 禁止出现歧义多行表达式
      'no-unexpected-multiline': 2,

      // 禁止不需要的转义
      'no-useless-escape': 0,

      // 数组的括号前后的间距
      'array-bracket-spacing': [2, 'never'],
    },
  },
  {
    files: ['**/*.ts'],
    languageOptions: {
      parser: tseslint.parser,
    },
  },

  // vue 规则
  {
    files: ['**/*.vue'],
    languageOptions: {
      parser: vueParser,
      globals: {
        ...globals.browser,
        ...globals.node,
      },
      parserOptions: {
        /** typescript项目需要用到这个 */
        parser: tseslint.parser,
        ecmaVersion: 'latest',
        /** 允许在.vue 文件中使用 JSX */
        ecmaFeatures: {
          jsx: true,
        },
      },
    },
    rules: {
      'vue/component-definition-name-casing': 'off',
      'vue/singleline-html-element-content-newline': ['off'],
      'vue/no-mutating-props': [
        'error',
        {
          shallowOnly: true,
        },
      ],
      // 要求组件名称始终为 “-” 链接的单词
      'vue/multi-word-component-names': 'off',

      // 关闭 index.html 文件报 clear 错误
      'vue/comment-directive': 'off',

      // 关闭对 defineProps 的有效性检查
      'vue/valid-define-props': 'off',

      // 允许在一个文件中定义多个组件
      'vue/one-component-per-file': 'off',

      // 关闭 Prop 类型要求的警告
      'vue/require-prop-types': 'off',
      // 关闭属性顺序要求
      'vue/attributes-order': 'off',

      // 关闭对默认 Prop 的要求
      'vue/require-default-prop': 'off',

      // 关闭连字符命名检验
      'vue/attribute-hyphenation': 'off',

      // 关闭自闭合标签的要求
      'vue/html-self-closing': 'off',

      // 禁止在关闭的括号前有换行
      'vue/html-closing-bracket-newline': 'off',
      // 允许使用 v-html 指令
      'vue/no-v-html': 'off',
    },
  },
];

五、prettier配置

1. 在根目录添加.prettierrc.yaml文件，内容为：
# 每行最多字符数量，超出换行(默认80)
printWidth: 100
# 缩进空格数，默认2个空格
tabWidth: 2
# 指定缩进方式，空格或tab，默认false，即使用空格
useTabs: false
# 使用分号
semi: true
# 使用单引号 (true:单引号;false:双引号)
singleQuote: true
# 末尾使用逗号
trailingComma: all
endOfLine: auto
arrowParens: always
bracketSameLine: true
bracketSpacing: false
experimentalTernaries: false
jsxSingleQuote: true
quoteProps: preserve

singleAttributePerLine: true
htmlWhitespaceSensitivity: css
proseWrap: never
insertPragma: false
requirePragma: false
embeddedLanguageFormatting: auto
vueIndentScriptAndStyle: true
2. 在根目录添加.prettierignore文件，内容为：

prettier忽略格式化的文件

node_modules
dist
public
*.min.js

六、stylelint配置

1. 在根目录添加.stylelintrc.cjs文件，内容为：
module.exports = {
  // 继承推荐规范配置
  extends: [
    'stylelint-config-standard',
    'stylelint-config-recommended-scss',
    'stylelint-config-recommended-vue/scss',
    'stylelint-config-html/vue',
    'stylelint-config-recess-order',
  ],
  // 指定不同文件对应的解析器
  overrides: [
    {
      files: ['**/*.{vue,html}'],
      customSyntax: 'postcss-html',
    },
    {
      files: ['**/*.{css,scss}'],
      customSyntax: 'postcss-scss',
    },
  ],
  // 自定义规则
  rules: {
    // 允许 global 、export 、v-deep等伪类
    'selector-pseudo-class-no-unknown': [
      true,
      {
        ignorePseudoClasses: ['global', 'export', 'v-deep', 'deep'],
      },
    ],
    'selector-class-pattern': null,
    'selector-id-pattern': null,
    // 'selector-no-vendor-prefix': null,
    // 'value-no-vendor-prefix': null,
    // 'alpha-value-notation': null,
    'color-function-notation': null,
    // 'rule-empty-line-before': null,
    'no-descending-specificity': null,
    // 'number-leading-zero': null,
    // 'declaration-block-no-redundant-longhand-properties': null,
    'font-family-no-missing-generic-family-keyword': null,
  },
};
2. 在根目录添加.stylelintignore文件，内容为：

stylelint格式化需要忽略的文件

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

stats.html

七、格式化命令

yarn lint // eslint代码质量检测并修复
yarn format // prettier格式化并修复
yarn lint:stylelint // stylelint 格式化并修复

eslint+prettier参考：https://juejin.cn/post/7448976272984571930
stylelint参考：https://blog.csdn.net/qq_35940731/article/details/138703684

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容