prettier + eslint 配置

news2024/11/20 13:21:10

vue-cli 新建项目选择 ESLint + Prettier 会自动下载相关包
在这里插入图片描述

settings.json

{
  "editor.formatOnSave": true, // 开启保存文件自动格式化代码
  "editor.defaultFormatter": "esbenp.prettier-vscode", // 默认的代码格式化工具
  // "prettier.requireConfig": true, // 需要Prettier的配置文件
  "eslint.enable": true, // 开启eslint检查
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": "explicit"
  },
  "[javascript]": {
    "editor.defaultFormatter": "rvest.vs-code-prettier-eslint"
  },
  "[vue]": {
    "editor.defaultFormatter": "rvest.vs-code-prettier-eslint"
  }
}

.eslintrc.js

module.exports = {
  root: true,
  env: {
    node: true
  },
  extends: ['plugin:vue/essential', 'eslint:recommended', 'plugin:prettier/recommended'], // 启用 Prettier 的推荐规则，与 Prettier 一起使用时，这些规则可以确保代码格式与 Prettier 保持一致
  parserOptions: {
    parser: '@babel/eslint-parser'
  },
  plugins: ['prettier'],
  rules: {
    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    'prettier/prettier': 'error' // 如果代码不符合 Prettier 的格式要求，则报错
  }
}

.prettierrc.js

module.exports = {
  printWidth: 100,
  tabWidth: 2, // 超过最大值换行
  semi: false, // 结尾不用分号
  singleQuote: true, // 使用单引号
  // disableLanguages: ['vue'], // 不格式化vue文件，vue文件的格式化单独设置
  htmlWhitespaceSensitivity: "ignore",
  trailingComma: "none", // 函数后面不加逗号，如果不写这一个，在methods 最后一个函数也会加逗号，eslint会报错，多了一个逗号
  endOfLine: "auto",
};