vue3+ts配置代码规范-优快云博客

本文链接：https://blog.youkuaiyun.com/wangyuiba1314/article/details/127060883

本文介绍如何在项目中配置ESLint与Prettier，包括安装必要的依赖、设置ESLint规则、配置Prettier样式及stylelint规则，确保代码风格的一致性和高质量。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

每次eslint插件更新后都会出现奇奇怪怪的报错

1. 运行npx eslint --init

我的选择

下载完成后的版本（版本不一致，会导致配置不一样）
在这里插入图片描述

2. 安装prettier

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

在根目录下新建.prettierrc.js文件

module.exports = {
  // printWidth: 80,
  // tabWidth: 2,
  // useTabs: false,
  semi: false, // 未尾分号, default:  true
  singleQuote: true, // 单引号 default: false
  // quoteProps: 'as-needed',
  // jsxSingleQuote: false,
  trailingComma: "none", // 未尾分号 default: es5    all | none | es5
  // bracketSpacing: true,
  // bracketSameLine: false,
  // jsxBracketSameLine: false,
  arrowParens: "avoid", // default: always
  // insertPragma: false,
  // requirePragma: false,
  proseWrap: "never",
  // htmlWhitespaceSensitivity: 'css',
  // vueIndentScriptAndStyle: false,  // .vue 缩进
  endOfLine: "auto", // default lf
};

3. 修改他生成的.eslintrc.js文件如下

module.exports = {
  env: {
    browser: true,
    es2021: true
  },
  extends: [
    'plugin:@typescript-eslint/recommended',
    'plugin:vue/vue3-recommended',
    'plugin:prettier/recommended'
  ],
  overrides: [],
  parser: 'vue-eslint-parser' /* 解析 .vue 文件 */,
  parserOptions: {
    ecmaVersion: 'latest',
    parser: '@typescript-eslint/parser',
    sourceType: 'module',
    jsx: true,
    tsx: true
  },
  plugins: ['vue', '@typescript-eslint'],
  rules: {
    'vue/multi-word-component-names': 'off',
    '@typescript-eslint/no-explicit-any': 'off',
    '@typescript-eslint/no-var-requires': 'off',
    '@typescript-eslint/ban-ts-comment': 'off'
  }
}

4. stylelint配置

npm install stylelint stylelint-config-standard-scss stylelint-config-standard-vue stylelint-scss postcss-html -D

.stylelintrc

{
  "extends": [
    "stylelint-config-standard-scss",
    "stylelint-config-standard-vue/scss"
  ],
  "plugins": [
    "stylelint-scss"
  ],
  "rules": {
    "indentation": 2,
    "selector-class-pattern": [
      "^([a-z][a-z0-9]*)(-[a-z0-9]+)*$",
      {
        "message": "Expected class selector to be kebab-case"
      }
    ],
    "no-descending-specificity": true,
    "property-no-unknown": null,
    "function-no-unknown": [
      true,
      {
        "ignoreFunctions": [
          "v-bind"
        ]
      }
    ]
  }
}