javascript - Prettier 不会根据我的 eslint 配置进行格式化
问题描述
我已经在 VSCode 上安装了 Eslint-Prettier 扩展。我已经有一个 .eslintrc.js 并且我的默认格式化程序(Eslint-prettier)没有根据我的 eslint 规则进行格式化。
例如:当我输入 npm run eslint 时。--fix 它删除了所有分号,但是在我按下 CTRL + V 后,prettier 又添加了分号..
在我格式化我的电脑之前,一切都很好。谁能帮我?
我的 .eslintrc.js 文件内容是
module.exports = {
env: {
node: true,
es6: true,
browser: true
},
parserOptions: {
ecmaVersion: 6,
sourceType: "module",
ecmaFeatures: {
jsx: true,
modules: true,
experimentalObjectRestSpread: true
}
},
rules: {
"no-console": "off",
"no-debugger": process.env.NODE_ENV === "production" ? "error" : "off",
// Best Practices
eqeqeq: "error",
"no-invalid-this": "error",
"no-return-assign": "error",
"no-unused-expressions": ["error", { allowTernary: true }],
"no-useless-concat": "error",
"no-useless-return": "error",
// Variable
// 'init-declarations': 'error',
"no-use-before-define": "error",
// Stylistic Issues
"array-bracket-newline": ["error", { multiline: true, minItems: null }],
"array-bracket-spacing": "error",
"brace-style": ["error", "1tbs", { allowSingleLine: true }],
"block-spacing": "error",
"comma-dangle": "error",
"comma-spacing": "error",
"comma-style": "error",
"computed-property-spacing": "error",
"func-call-spacing": "error",
"implicit-arrow-linebreak": ["error", "beside"],
// indent: ['error', 4],
"keyword-spacing": "error",
"multiline-ternary": ["error", "never"],
// 'no-lonely-if': 'error',
"no-mixed-operators": "error",
"no-multiple-empty-lines": ["error", { max: 2, maxEOF: 1 }],
"no-tabs": "error",
"no-unneeded-ternary": "error",
"no-whitespace-before-property": "error",
"nonblock-statement-body-position": "error",
"object-property-newline": [
"error",
{ allowAllPropertiesOnSameLine: true }
],
"quote-props": ["error", "as-needed"],
// quotes: ['error', 'prefer-single'],
semi: ["error", "never"],
"semi-spacing": "error",
"space-before-blocks": "error",
// 'space-before-function-paren': 'error',
"space-in-parens": "error",
"space-infix-ops": "error",
"space-unary-ops": "error",
// ES6
"arrow-spacing": "error",
"no-confusing-arrow": "error",
"no-duplicate-imports": "error",
"no-var": "error",
"object-shorthand": "error",
"prefer-const": "error",
"prefer-template": "error"
}
}
你可以看到 eslint 说没有尾随昏迷,在我右键单击其中一个并修复所有可自动修复的问题后,问题就消失了,但在我保存文件后更漂亮的扩展名又放了它们。
解决方案
- 安装 eslint:
npm i --save-dev eslint
- 初始化 eslint:
对于某些选项,您需要选择下一个:npx eslint --init
- 你想如何使用 ESLint?
- 检查语法并发现问题
- 您希望您的配置文件采用什么格式?
- JavaScript
- 安装更漂亮:
npm i --save-dev eslint-config-prettier eslint-plugin-prettier prettier
- 创建
.prettierrc
配置文件:{ "printWidth": 80, "singleQuote": true, "trailingComma": "es5" }
现在,您可以使用 eslint 检查样式并从命令行使用更漂亮的样式修复样式。
对于 VSCode 与 eslint 和 prettier 的集成,您需要安装以下之一:
之后,您需要将此扩展名设置为默认格式化程序:
- 打开命令调色板
ctrl+shift+p
; - 选择
Format Document With...
; - 选择
Configure Document With...
; - 选择
Prettier - Code Formatter
或ESLint
根据您的喜好。
现在,eslint 将作为 linter 和 prettier 作为格式化程序工作:
如果我保存文件,所有更漂亮的问题都将得到解决(应该打开保存时的自动格式化)
Eslint 插件不会自动应用位于
.prettierrc
. 请参阅github 上的问题。要解决此问题,您可以:
- 移动
.prettierrc
.eslint 中的内容(不推荐,因为更漂亮的插件有时不读取此文件);- 在编辑后从 VSCode 中的命令调色板运行
ESLint: Restart ESLint server
。prettierrc
文件。
推荐阅读
- c - 使用 if/else 语句进行赋值是否能获得任何性能?
- android - Firebase InApp 消息传递测试
- c# - 将字符串文件路径转换为 IntPtr
- node.js - 尝试代理时出错:http://localhost:4200/api/*
- xpath - Google sheet XPath scraping: copy currency exchange rate
- python - mysql中的Python动态查询
- mysql - 在从属数据库中插入缺失的数据
- reactjs - 从 API 获取的 React 对象缺少属性
- python - 如何将熊猫数据框转换为结构独特的嵌套 json
- android - Kotlin RecyclerView 开始新活动