prettier + eslint 配置

2024-03-23 12:28

文章标签 配置 eslint prettier

本文主要是介绍prettier + eslint 配置，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

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",
};