如何防止prettier删除eslint standardJS注释？

要防止Prettier删除ESLint StandardJS注释，可以采取以下方法：

在项目根目录下创建一个.prettierrc文件，并将以下配置添加到文件中：

{
  "overrides": [
    {
      "files": "*.js",
      "options": {
        "parser": "babel-eslint",
        "semi": true,
        "singleQuote": true,
        "printWidth": 80,
        "trailingComma": "es5",
        "arrowParens": "always",
        "proseWrap": "always",
        "requirePragma": true,
        "insertPragma": true
      }
    }
  ]
}

这将告诉Prettier在处理JavaScript文件时使用babel-eslint解析器，并保留ESLint StandardJS注释。

在项目的.eslintrc文件中，将以下配置添加到rules部分：

"no-mixed-spaces-and-tabs": ["error", "smart-tabs"]

这将确保在代码中使用空格和制表符时不会触发ESLint错误。

在项目的package.json文件中，将以下配置添加到scripts部分：

"scripts": {
  "format": "prettier --write \"src/**/*.js\""
}

这将创建一个自定义的格式化脚本，只对src目录下的JavaScript文件进行格式化。

运行以下命令来格式化代码：

npm run format

这将使用Prettier对代码进行格式化，同时保留ESLint StandardJS注释。

通过以上步骤，你可以防止Prettier删除ESLint StandardJS注释，并确保代码格式化的一致性。

相关·内容

Eslint团队终于妥协了...

配置过代码格式化的同学一定纠结过如下问题：Eslint和Prettier都能格式化代码风格，是单用Eslint，还是两个一起用呢？...基于上述原因，出现了两种解决方案：方案1 Eslint与Prettier配合使用其中Eslint负责代码质量、错误检查，Prettier负责代码风格检查。优点是能够满足代码质量、风格检查。...缺点是： Eslint与Prettier规则可能冲突，配置成本高代码风格检查的可配置性低（Prettier配置性低）方案2 只使用Eslint 使用「代码风格相关规则的集合」，比如@stylistic...举个例子，如果自动修复需要添加新的代码行，就需要知道文件是如何缩进的，以便应用正确的修复。.../javascript/ [3] standard规则: https://standardjs.com/ [4] @stylistic/eslint-plugin-js: https://www.npmjs.com

3862 0

使用ESLint+Prettier来统一前端代码风格

本文将介绍，如何使用ESLint + Prettier来统一我们的前端代码风格。 Prettier是什么？...虽然js没有官方推荐的代码规范，不过社区有些比较热门的代码规范，比如standardjs、airbnb。...ESLint 与 Prettier配合使用首先肯定是需要安装prettier，并且你的项目中已经使用了ESLint，有eslintrc.js配置文件。...npm i -D prettier 配合ESLint检测代码风格安装插件： npm i -D eslint-plugin-prettier eslint-plugin-prettier插件会调用prettier...changed}}" } 当然，你也能够在编辑器中配置对prettier的支持，具体支持哪些编辑器，请戳这里如何对Prettier进行配置一共有三种方式支持对Prettier进行配置：根目录创建.

2.7K2 0

vscode下配置vue.js的插件

，jspm，bower，dub和dotnet核心的软件包版本信息 15、vscode-element-helper：element-ui插件 16、Beautify：主要拿它来格式话html的 17、StandardJS...格式进行修复 "eslint.autoFixOnSave": true, // 添加 vue 支持 "eslint.validate": [ "javascript", "javascriptreact...", { "language": "vue", "autoFix": true } ], // #让prettier使用eslint的代码格式进行校验..."prettier.eslintIntegration": true, // #去掉代码结尾的分号 "prettier.semi": false, // #使用带引号替代双引号..."prettier.singleQuote": true, // #让函数(名)和后面的括号之间加个空格 "javascript.format.insertSpaceBeforeFunctionParenthesis

3.3K2 0

前端规范那些事

随着前端工程化的日益成熟，代码规范化对于开发效率的提升起着很大的作用，包括后期的维护，统一的规范能节省交接的时间成本，而规范包括目录结构、代码质量（命名、注释、JS规范、CSS规范、缩进等） ?...） eslint-plugin-vue (vue官方eslint插件,检测vue语法) 官方文档链接 airbnb规范标准：官方文档链接 1.1 如何安装eslint npm install...-g eslint 1.2 如何将eslint集成到项目中方式1: packjson中配置eslintConfig ?...使用eslint-plugin-prettier插件来添加prettier作为ESLint的规则配置，在ESLint运行Prettier 2.2.1 安装安装eslint-plugin-prettier...与plugins中是为了防止eslint配置的rules与Prettier配置的rules冲突 3.

1.2K3 0

花十分钟的时间武装你的代码库

--write", "eslint" ] } 这样配置之后，每次提交的时候，都会对要提交的文件（并不是对整个项目）进行 prettier 格式化和 eslint 检查，都通过之后...eslint 和 prettier 配置我的项目是 react 项目，下面是我进行的配置。...安装 eslint 和 prettier 相关依赖： npm install eslint eslint-config-prettier eslint-plugin-promise eslint-plugin-react...eslint-plugin-react-hooks prettier babel-eslint -D 新建 .prettierrc.js 当然啦，你也可以在 package.json 的 prettier...no-unused-labels': 1, //禁用出现未使用过的标 'no-useless-escape': 1, //禁用不必要的转义字符 'no-delete-var': 2, //禁止删除变量

2.6K3 0

【前端财富】前端工程师装机指南 (windows10)

谷歌浏览器新电脑自带一个 edge，虽说也是和谷歌一样的内核，但我更习惯用谷歌安装后进行下列操作设置浏览器显示最小字体，防止开发移动端时小字体显示出问题把浏览器首页设置为流莺起始页安装插件..."[shellscript]": { "files.eol": "\n" }, //控制如何处理在受信任的工作区中打开不受信任的文件 open: 始终允许不受信任的文件引入受信任的工作区...*/ "editor.accessibilitySupport": "off", // 控制资源管理器是否在把文件删除到回收站时进行确认。..."editor.renderControlCharacters": true, // 启用后，将在保存文件时删除行尾的空格。...```````*/ //自动生成注释插件文件头部注释 "fileheader.customMade": { "Author": "一尾流莺", "Description":

1.5K2 0

Vscode笔记-24款插件

，防止配对时眼瞎。.../eslint-plugin prettier eslint-config-prettier eslint-plugin-prettier --dev or npm install eslint @typescript-eslint.../parser @typescript-eslint/eslint-plugin prettier eslint-config-prettier eslint-plugin-prettier --save-dev...，删除搜索安装Turbo Console Log 插入有意义的日志消息选择作为调试主题的变量按Ctrl + Alt + L 多光标支持注释当前文档中所有由扩展名插入的日志消息要注释当前文档中扩展名插入的所有日志消息...，只需按alt + shift + c 取消注释当前文档中扩展名插入的所有日志消息取消注释当前文档中由扩展名插入的所有日志消息的全部操作是按alt + shift + u 从当前文档中删除所有由扩展名插入的日志消息

10.7K2 1

如何制定企业级代码规范与检查

前言如何作出项目的亮点？项目中遇到了什么问题？解决问题的过程并且如何思考？思考之后通过什么方式解决最后这一个任务你学到了什么，给团队带来了什么价值，解决了哪些痛点。...我们目前选择的方式不是继承，挑选出了一些适合我们的 ESLint 规则(因为是在原有代码重新建立规范，防止改动过大)。...要解决的问题使用 Prettier 如何避免与 ESLint 和 TSLint 的格式化冲突? Prettier 中不提供的格式化规则，ESLint 中提供的可以兼容一起使用吗？...带着两个问题继续往下看集成安装模块包我们来看如何结合 ESLint 来使用。...这里关于防止 Prettier 和 ESLint 冲突，画了一张另外 eslint-plugin-prettier 和 eslint-config-prettier 的源码都不是很复杂，感兴趣的同学可以去看看

2K2 0

代码规范之-理解ESLint、Prettier、EditorConfig

它在美化代码方面有很大的优势，配合ESLint可以对ESLint格式化基础上做一个很好的补充。那么如何使用呢？...你可以使用注释或配置文件修改你项目中要使用的规则。...extends: ["eslint:recommended","plugin:prettier/recommended"], 复制代码配置代码注释方式有时候，我们需要在代码中忽略ESLint的某些规则检查...如何方便地开始使用ESLint，而且尽量不改动以前的代码？...如何解决Prettier与ESLint的配置冲突问题？

2.8K3 0

vscode 前端最佳插件配置

格式化，全世界都在使用Prettier来统一风格【局部】** Eslint Js 语法检测【全局】 Tslint Typescript 语法检测【ts，js文件】 JSON to...// 可选值： eslint ："dbaeumer.vscode-eslint" vetur: "octref.vetur" prettier: "esbenp.prettier-vscode...在文件保存时，stylelint样式规则生效 }, "eslint.options": { // eslint配置文件 ,修改为你自己项目文件位置，或者直接删除 //...// 这导致代码完成在编辑注释和字符串时建议单词。...npm install –save-dev eslint-plugin-html eslint-plugin-react 要么删除此项配置，要么配置为你自己的校验规则地址 "eslint.options

5.5K2 0

nuxt3 + ts + eslint+ prettier

初始化nuxt3项目如果报错参考这篇添加eslint和prettier 安装以下包，版本不限（这些版本暂时无报错） { "@vue/eslint-config-prettier": "^7.0.0..."prettier": "^2.7.1", "typescript": "^4.9.5", "eslint-plugin-nuxt": "^4.0.0", // 针对nuxt3的校验插件 } 创建...(prettier/prettier)报错，如出现添加此项即可，不是最佳方案，详见补充2 }, ], }, } 注释都是需要注意的地方和常见错误补充因为nuxt3中使用了unplugin...Delete ␍eslint(prettier/prettier)报错，是因为mac和windows换行符差异，加endOfLine: 'auto'规则只是忽略换行符差异，但是不利于工程化统一。...= true [*] indent_style = space indent_size = 2 # 规定换行符格式 end_of_line = crlf charset = utf-8 #是否删除换行符之前的空白字符

2.6K4 0

使用这些配置规范并格式化你的代码

tab_width = 2; ## 设置为 lf、cr 或 crlf 以控制如何表示换行符。...charset = utf-8 ## 设置为 true 以删除换行符之前的任何空格字符，设置为 false 以确保不会。...（注释的地方是默认配置，无需新增） // 编辑的时候检测还是保存的时候检测，默认在编辑的时候就检测。...接下来，我将从普遍用法、Vue项目特殊配置、React项目特殊配置来看下如何配置 .eslintrc.js 文件。普遍用法默认情况下，ESLint 支持 ES5 的语法。...你可以使用注释或配置文件修改你项目中要使用的规则 (https://cn.eslint.org/docs/user-guide/configuring#configuring-rules)。

2.5K3 0

可能是目前最详细从零开始配置 TypeScript 项目的教程

列举你所知道的 ESLint 功能？如何确保构建和上传的代码无 ESLint 错误信息？ ESLint 和 Prettier 的区别是什么？两者在一起工作时会产生问题吗？...如何有效的识别 ESLint 和 Prettier 可能产生冲突的格式规则？如何解决此类规则冲突问题？ git hook 在项目中哪些作用？ git hook 中客户端和服务端钩子各自用于什么作用？..."target": "ES5", // 构建的目标代码删除所有注释，除了以 /!...Git Hook 其实是进行项目约束非常好用的工具，它的作用包括但不限于： Git Commit Message 规范强制统一 ESLint 规则统一，防止不符合规范的代码提交 Prettier 自动格式化...一般的工具库可以采用 tsdoc[122]、jsdoc[123] 或 esdoc[124] 等工具进行 API 文档的自动生成，但往往需要符合一些注释规范，这些注释规范在某种程度上可能会带来开发负担，当然也可以交给

4.9K2 2

如何快速删除程序中的所有注释

如果你下载了他们的源代码，会发现一个现象，他们删除了所有的注释。原因很复杂，我们不过多猜测。因为在一些特殊情况下，确实存在需要删除注释的需求！...这里说一下如何实现删除一个工程里所有的注释，这样的功能。注意，这里说的删除注释，不是说之前有双斜线，然后把双斜线去掉。而是要把注释内容去掉！ ? 方法分两种：第一种，纯手工！...第二种，使用专用的注释删除软件，帮我们完成工作。这还有软件？是的！如果你有软件基础，完全可以自己手写一个。如果懒得写，可以使用别人开发好的工具。...因为去除注释的操作是直接覆盖原文件，所以操作之前一定要做好备份。另外，无论是手工操作，还是软件操作，都是有隐患的！...以软件操作为例，它会删除这样的信息段： "/* ....*/" 但如果程序中要打印这样的信息，它会把打印信息搞坏，自然不会得到我们想要的结果。所以，使用有风险，操作需谨慎！

6.4K1 0

使用ESLint ＆ Prettier美化Vue代码

本文就如何使用 ESLint ＆ Prettier，来格式并美化 Vue 代码做下探讨；如果您使用其他类型框架，这份经验绝大部份依旧适用。...", "eslint:recommended" ] }, 当然，还需安装依赖库： eslint-plugin-prettier 和 eslint-config-prettier...yarn add --dev eslint-plugin-prettier eslint-config-prettier prettier-eslint-cli 这里需要补充说明下的是 eslint-plugin-prettier...": "prettier-eslint --write \"src/**/*.js\" \"src/**/*.vue\"" } } 修改规则配置您需要知道的是，两者混合使用时候，需要修改规则，以防止重复或冲突...Pre-commit Hook 约束代码提交以上探讨了如何运用 ESLint ＆ Prettier 写出优质代码，这都是针对个人的推荐性行为；为保证团队统一代码风格，则必须采取些手段以强制约束；假如您的团队使用

3.4K7 1

从 ESLint 开始，说透我如何在团队项目中基于 Vue 做代码校验

如何与 ESLint 配合使用？ EditorConfig 又是什么？如何使用？...如何在 VSCode 中通过插件来协助代码校验工作；如何保证 push 到远程仓库的代码是符合规范的；下面开始阅读吧，如果你对 ESLint 比较熟悉，可以直接跳过这个部分。...上面细说了 ESLint 的各种配置项，以及针对 Vue 项目如何进行差异配置的说明。...配置方式 ESLint 支持 3 种配置方式：命令行：不推荐，不做介绍；单文件内注释：不推荐，不做介绍；配置文件：配置文件的类型可以是好几种，比如：.js、.yml、json 等。...Prettier 是什么？为什么有了 ESLint，还需要引入 Prettier 呢？它两之间有什么区别？如何配置 Prettier？ Prettier 如何和 ESLint 结合使用？

2.4K2 0

Prettier+Vscode setting提高前端开发效率

一文读懂 ESLint配置一文读懂 ESLint配置 Prettier Prettier可以通过JSON 、YAML 、JavaScript 等方式来进行配置。...": "explicit", "source.fixAll.prettier": "always" }, "eslint.useFlatConfig": true, // Silent..." }, // 配置语言的文件关联 "files.associations": { "pages.json": "jsonc", // pages.json 可以写注释 "manifest.json...": "jsonc" // manifest.json 可以写注释 }, // 隐藏文件，净化工作区可见文件 "files.exclude": { // "**/.git": true...explorer.confirmDelete false 禁用删除文件时的确认提示对话框。 editor.formatOnPaste false 禁用粘贴内容时自动格式化。

1401 0

prettier使用指南（包含所有配置项）

的区别 prettier的配置项比较少（容易配置），且只专注于代码样式，而eslint还提供语法检查，现在的eslint也集成了formatter功能。...prettier相比eslint支持更多文件的格式化。...解决和eslint的冲突安装 eslint-config-prettier，这个插件会把eslint中可能导致冲突的规则关掉，这样两者就能兼容使用了。...用注释忽略格式化代码 // prettier-ignore注释会忽略抽象语法树下一行代码的格式化举个例子 matrix( 1, 0, 0, 0, 1, 0, 0, 0, 1 ) // prettier-ignore...( ) " > CSS中的注释 /* prettier-ignore */ .my ugly rule { } MarkDown中的注释 <!

9.2K4 0

别再用 ESLint 格式化你的代码了！原理揭秘。

不确定是否可以安全地从"extends"中删除prettier？尝试删除它，然后运行npx eslint-config-prettier some/file.js，看看它是否指出了任何冲突的规则。...如果prettier/prettier在你的 ESLint 配置中启用，你可以采取的最佳步骤是将其从配置中删除，并完全卸载eslint-plugin-prettier包。...如果你的 ESLint 配置引用了eslint-config-prettier，我建议你尝试将其从配置中删除。你可能不再需要它了。..., Prettier, and TypeScript Together是我的一篇博客文章，更详细地介绍了如何配置这些工具。...感谢Ben Scott，eslint-config-prettier的维护者之一，审阅了这篇文章，并建议了如何描述eslint-plugin-prettier的澄清和更正。

7871 0

统一开发环境、了解配置原理（上）

将对这些方面进行限制，并告诉大家这些不同的插件的作用以及如何使用。...，规则的配置各取所需，我们在文中就不着重讲了，后续可以到仓库中查看我定义的规则，我也为每一条规则添加了详细的注释。...我们在git项目里提供了我得配置并且都加入了中文注释，如果想要自己配置也可以从上面的配置地址查看更多配置： module.exports = { printWidth: 120, //最大单行长度...eslint-config-prettier: 会关闭掉所有的eslint关于格式化的配置 eslint-plugin-prettie: 会将prettier配置为eslint的插件，让其成为eslint...最终我们只需要在入口页引入不同的规则即可，如果大家后续项目参考我这样的写法，可以在不同的文件下去看看对应的规则，在里面也会有详细的注释。

1281 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云