为什么prettier会自动插入空内插码字符？

Prettier是一个流行的代码格式化工具，它通过定义一系列的代码风格规则来帮助开发者统一代码的格式，提高代码的可读性和可维护性。其中，空内插码字符是指在代码中使用模板字符串时，模板字符串内部的变量或表达式被自动包裹在空格和换行符之间，以使代码更加整齐。

Prettier自动插入空内插码字符的目的是为了在代码格式化过程中保持统一的风格，避免不必要的格式差异，从而提高代码的可读性和一致性。在一些开发场景中，特别是在大型团队协作开发或开源项目中，不同开发者的代码风格可能存在差异，如果不进行统一的格式化处理，可能导致代码难以理解、维护困难等问题。

空内插码字符的插入有助于将代码中的变量或表达式与静态内容分开，使代码更具可读性。这种空格的插入还可以避免代码过长导致的可读性问题，并且使得代码在不同的编辑器或IDE中都能够保持一致的格式。

总结来说，prettier会自动插入空内插码字符是为了保持代码的统一风格、提高代码的可读性和一致性。通过代码格式化，使得代码更易于理解和维护。在使用Prettier时，可以使用相关的配置选项来自定义空内插码字符的格式，以满足项目或团队的需求。

相关·内容

【Vue3+TypeScript】CRM系统项目搭建之 — 代码规范

以 WebStrom 为例，安装 Editorconfig 插件此时需要在项目根目录下新建配置文件 .editorconfig 官网文档 – 跨编辑器保持统一代码风格 # http://editorconfig.org...insert_final_newline = true # 始终在文件末尾插入一个新行 [*.md] # 表示仅 md 文件适用以下规则 max_line_length = off trim_trailing_whitespace...使用 Eslint 进行代码检测在前面创建项目的时候，我们就选择了ESLint，所以Vue会默认帮助我们配置需要的ESLint环境。...比如在 prettier 中规定在代码保存的时候自动格式化代码，使得所有得单引号变为双引号，但是我们在 eslint 中规定的是，不可以是双引号。这就不符合 eslint 的规范了。...安装插件：（vue在创建项目时，如果选择prettier，那么这两个插件会自动安装） npm install eslint-plugin-prettier eslint-config-prettier

1271 0

Groovy语法系列教程之字符串（三）

当按如下方式创建字符串： def startingAndEndingWithANewline = ''' 第一行第二行第三行''' 您会注意到，结果字符串的第一个字符是换行符。...因此，如果在该占位符中插入了多个语句，则最后一个应以某种方式返回要插入的有意义的值。...： assert '$5' == "\$5" assert '${name}' == "\${name}" 4.4.2 内插闭包表达式的特殊情况到目前为止，我们已经看到可以在${}占位符内插入任意表达式...尽管可以使用内插的字符串代替普通的Java字符串，但是它们与字符串不同：它们的哈希码不同。...纯Java字符串是不可变的，而由GString生成的String表示形式可能有所不同，具体取决于其内插值。即使对于相同结果第字符串，GString和String的哈希码也是不同的。

7.7K5 1

Vue 基于VSCode结合Vetur+ESlint+Prettier统一Vue代码风格

{ // 界面配置路径 Text Editor "editor.wordWrap": "bounded", // 设置超过word Wrap Column设置的字符数、达到视口最小宽度，时自动换行...120, // editor.wordWrap 配置为wordWrapColumn或者bounded时起作用 "editor.insertSpaces": true, // 设置输入tab键时是否自动转为插入空格...files.encoding": "utf8", // 设置读写文件时所用编码默认UTF-8，可针对每种语言进行设置 "files.autoGuessEncoding": false, // 设置打开文件时，是否自动猜测字符编码...true，则单引号会自动变成双引号 "prettier.tabWidth": 2, // 设置每个tab占用多少个空格 "prettier.printWidth": 120, // 设置每行可容纳字符数...useTabs 的使用规则也是如此 Prettier - Code formatter插件类似Vetur，：Prettier并不具有ESlint检查语法能力，主要用于代码格式化，统一代码风格(最大长度

6.9K2 0

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

为什么要使用它？如何与 ESLint 配合使用？ EditorConfig 又是什么？如何使用？...Prettier 是什么？ 为什么有了 ESLint，还需要引入 Prettier 呢？它两之间有什么区别？如何配置 Prettier？ Prettier 如何和 ESLint 结合使用？...如下，把项目中会用到的参数进行一个说明： module.exports = { printWidth: 80, //（默认值）单行代码超出 80 个字符自动换行....vue 文件； editor.codeActionsOnSave 开启保存自动修复功能；当这样配置之后呢，每次编辑代码 ESLint 都会实时校验代码，且当保存的时候会自动 fix，是不是很方便呢...在提交前做校验 pre-commit 以上只是通过 ESLint 自动修复能够修复的错误以及通过 Prettier 进行代码的格式化，但是在实际开发的时候难免会遇到无法 fix 的错误，可能开发人员也忘记修改

2.4K2 0

手把手教你使用 ESLint + Prettier 规范项目代码

ESLint 是一个用来识别 ECMAScript 并且按照规则给出报告的代码检测工具，使用它可以避免低级错误和统一代码的风格。...eslint-plugin-prettier --save-dev vscode 插件安装安装 vscode 插件 ESLint 和 Prettier - Code formatter 如果希望在每次保存时自动格式化代码可以加上以下配置...创建配置文件 .prettierrc.js //.prettierrc.js module.exports = { // 一行最多 120 字符 printWidth: 120, // 使用...requirePragma: false, // 不需要自动在文件开头插入 @prettier insertPragma: false, // 使用默认的折行标准 proseWrap...pwd=yu27 提取码: yu27 百度云链接不稳定，随时可能会失效，大家抓紧保存哈。

1.2K2 0

C# 11 都有哪些新特性？

首席项目经理凯瑟琳在博客中介绍了 C# 11 的一些预览性新功能，这些功能可以在 Visual Studio 17.1 和 .NET SDK 6.0.200 中体验，下面摘录一部分新特性作介绍： C# 11 预览：允许在内插字符串的...“插值表达式”中换行（interpolated strings）是 C# 6.0 引入的语法，它**允许在字符串中插入表达式。...**C# 的内插字符串分为非逐字和逐字内插字符串（分别是 "" 和但是，非逐字插值字符串中的“换行符限制”，从字符串文本扩散到了文本之外的插值表达式，这导致了很多不必要的限制。...到参数名，自动执行空值检查： public static void M(string s!!)...{ // Body of the method } 自动生成的空值检查代码将在方法主体的代码之前执行。

2701 0

Eslint配套集成指南【03】

prettier官方文档 prettier是一款代码风格格式化工具，我们在项目中已经用到了Eslint了为什么还要使用这个工具呢？...Eslint属于代码质量工具，在对语法和一些规则验证的同时，可以对一些简单的例如单双引号，是否逗号结尾这些语法做检验，但是并没有办法对项目的风格比如代码的缩进，一行最多多少个字符，结尾需不需要再空一行等等的属于风格类型的问题进行修复和规定...但是我发现貌似省略掉eslint-xxx会带来一个问题（Definition for rule 'prettier/prettier' was not found prettier/prettier）这个问题的原因我还没有找到...注意点冲突问题：一般情况，Eslint是拥有自己的formatter rules的，这里大概率会和prettier冲突，prettier拥有大部分的格式化是默认的内置的（他认为应该更少的开放用户自己的配置权限...就是解决这一问题的，我们在决定使用prettier的时候就说明我们需要prettier全权处理格式问题，我们在extends时要把prettier放在最后,因为后面的配置会覆盖掉前面的，也就是最终保留的规则依然是

1.1K1 0

C# 8小特性

对于C# 8，有吸引了大多数注意力的重大特性，如默认接口方法和可空引用，也有许多小特性被考虑在内。本文将介绍几例可能加入C#未来版本的小特性。...\\ 逐字内插字符串 \\ 逐字字符串以@\”开头。内插字符串使用$\”。但是，如果你想要一个既逐字又内插的字符串呢？是用@$\”还是$@\”？...\\ 在一个名为“逐字插入字符串”的中肯提案中，该语法将得到扩展，接受@$\”。对它的解释将和逐字插入字符串（$@\”）完全相同，因此，你再也不用担心弄反了。...\\ 关于这项修改，存在一些小争议，因为有人认为这没有必要或者会导致不一致。 \\ 允许using语句结构匹配IDisposable \\ 接口与C#编译器之间存在着奇怪的关系。...MyDisposable();\using var b = new MyDisposable();\using var c = new MyDisposable();\ \\\上述每个变量都会在当前作用域结束时以相反的顺序自动释放

3711 0

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

提前查看会格式化哪些文件，不实际执行格式化 npx prettier --check . 实际使用过程中，还是直接用编辑器的插件的，设置成保存的时候执行格式化。...用注释忽略格式化代码 // prettier-ignore注释会忽略抽象语法树下一行代码的格式化举个例子 matrix( 1, 0, 0, 0, 1, 0, 0, 0, 1 ) // prettier-ignore...-- prettier-ignore --> Do not format this 忽略一定范围的代码 available in v1.12.0+ 通常实在文件顶部使用来取消一些自动生成内容的格式化...*/ // or /** * @format */ // 15.insertPragma: 自当插入pragma到已经完成的format的文件开头 // 16. proseWrap...指定parser,因为pretter会自动选择,所以一般不用指定(parser: "" parser: require(".

9.2K4 0

前端老项目接入 eslint 从配置到上线的一些思考

image-20220923090302423 相比于 eslint， Prettier 主要格式样式相关的，比如有没有分号、空格数、一行最大字符数等等，而 eslint 通过解析出代码的 AST ，...requirePragma: false, // 不需要自动在文件开头插入 @prettier insertPragma: false, // 使用默认的折行标准...// 保存时自动格式化 } 这个文件是 VSCode 针对当前工程的配置，配置后保存文件的时候插件会自动帮助我们格式化，同时有实时的错误提示。..., husky 提供了 pre-commit 的钩子，然后 lint-staged 对暂存区代码自动进行格式化，如果出错的话会直接退出。...缺点：当开发者修改、保存老文件后，会自动触发 lint 修复，从而污染混淆本身的修改，增加后续 code review 工作负担。

1.4K2 0

前端代码规范工具 eslint vs prettier 哪个更适合你

对于代码的格式，自古以来也是每个人都有自己的偏好，为了统一代码格式，人们想尽了办法，这也是golang为什么自带了一个格式化代码的工具，就是为了让代码格式变得统一，变得更加容易所有人阅读。...而我们今天要讨论的eslint和prettier就是两个前端统一代码样式的工具。 ESLint eslint是在2013年诞生的，现在它已经成为了最著名的代码格式化工具，每天都有百万的下载量。...它诞生的目的就是为了让你不用关系你的代码书写结构，因为当你保存代码的时候，它会自动帮助你格式化你的代码，并且不会修改你的代码内容，因为它修改的只是代码的结构视图。...当一个数字类型变量赋值了字符串时，它会给出错误提示。 ESlint会在格式化代码的时候，去修复代码中的错误，而Prettier更多地是去格式化代码而忽略代码中的错误。...如果你的代码还没有使用它们，那么我强烈建议你去尝试使用它们，在团队化的项目中，你会发现使用了它们会让你整个团队的代码看起来整齐划一。

6214 0

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

心中暗骂，这个人是不是个**，大括号为什么要换行？年轻气盛的我，居然满腔怒火，将空行一一删掉。但是关于代码风格，我们很难区分谁对谁错，不同的人有不同偏好，唯有强制要求才能规避争论。...使用ESLint配合这些规范，能够检测出代码中的潜在问题，提高代码质量，但是并不能完全统一代码风格，因为这些代码规范的重点并不在代码风格上（虽然有一些限制）。下面开始安利，Prettier。...的autofix功能，在保存代码的时候，自动将抛出error的地方进行fix。...module.exports = { "printWidth": 80, //一行的字符数，如果超过会进行换行，默认为80 "tabWidth": 2, //一个tab代表几个空格数，默认为80...总结有了prettier我们再也不用羡慕隔壁写golang的同事，保存后就能自动format，也不用为了项目代码不统一和同事争论得面红耳赤，因为我们统一使用prettier的风格。

2.7K2 0

打造一款高逼格的Vim神器

不保存退出 # :wq 保存后退出删除 # x 删除当前字符 # dw 删除至当前单词末尾 # de 删除至当前单词末尾，包括当前字符 # d$ 删除至当前行尾 # dd 删除整行 # 2dd 删除两行...修改 # i 插入文本 # A 当前行末尾添加 # r 替换当前字符 # o 打开新的一行并进入插入模式撤销 # u 撤销 # +r 取消撤销复制粘贴剪切 # v 进入可视模式 #...跳转到当前根路径 # J 到第一个节点 # K 到最后一个节点 # I 显示隐藏文件 # m 显示文件操作菜单 # C 将根路径设置为光标所在的目录 # u 设置上级目录为根路径 # ctrl + w + w 光标自动在左右侧窗口切换...Python人工智能调取摄像头神器校招毁约污点公司名录.pdf 扫码回复「大礼包」后获取大礼重磅！Python交流群已成立公众号运营至今，离不开小伙伴们的支持。...需要进群的朋友，可长按扫描下方二维码。▲长按扫码 ? 对了，看完记得来个五连操作，感谢你的鼓励，这个对我真的很需要 ‍‍‍

1.1K3 1

前端架构师神技，三招统一团队代码风格

为什么需要代码规范？...这两种命名方式都正确，都符合规范，但是会造成团队的代码风格混乱，无法统一。那为什么要统一呢？统一的好处有很多。比如我们统一规定：命名变量用下划线，命名方法用小驼峰。...": 100, // 一行的字符数，超过会换行（默认80） "tabWidth": 2, // 每个tab相当于多少个空格（默认2） "useTabs": true, // 是否使用tab进行缩进...到这一步，在三大神技的加持之下，我们已经实现了代码的自动检查与自动格式化，现在你编码的时候不需要考虑什么格式规范的问题，只要正常保存，编辑器会自动帮你做好这些事情。...所以我们把上面的 Prettier 配置写在这里即可实现共享。附录：命名和项目结构规范上面介绍了代码规范，代码检查和代码格式化，统一代码风格已经很全面了。

1K2 0

eslint+prettier学习

import引入的包放在了最上面不希望有console，有会报警告 if语句如果没有包大括号不会加大括号，会从两行转为一行多个import后面加一个空行字符串使用单引号缩进为2个空格未定义的变量会报错...eslint-plugin-promise eslint-plugin-import eslint-plugin-node { "extends": "standard" } 规则特点去掉分号 if语句会自动加大括号...，两行转为一行缩进2个空格字符串使用单引号自动把import引入的包放在了最上面多个Import之间有空行，最后一个import之后不会有空行未定义的变量会报错箭头函数前后需要空格未使用的变量会报错.../recommended', ], 两种区别：方式一：两种规则会有冲突方式二：两种规则没有冲突，会自动去掉eslint冲突的规则，配置简单。...requirePragma: false, // 不需要自动在文件开头插入 @prettier insertPragma: false, // 使用默认的折行标准

2.1K2 0

【React】初识React&JSX

document.querySelector('#root')).render(VNode) 注意事项：标签名和属性名是区分大小写的必须有一个根元素，可使用空节点...关键字不能同名（内置的与 js 关键字同名的属性，都已改为了其他名字） class => className for => htmlFor 推荐将 JSX 代码放在()中（美观、且能防止被格式化插件自动插入分号产生...Bug）可以编写注释 {/* 这是jsx中的注释 */} 不能写for循环和if分支添加prettier的配置 // 保存到额时候用使用prettier进行格式化 "editor.formatOnSave...": true, // 默认使用prittier作为格式化工具 "editor.defaultFormatter": "esbenp.prettier-vscode", // 不要有分号 "prettier.semi...": false, // 使用单引号 "prettier.singleQuote": true, JSX-配置tab键补全 // 当按tab键的时候，会自动提示 "emmet.triggerExpansionOnTab

2.2K2 0

Anthony Fu 对于 Prettier 的看法

我可以用不到5分钟的时间来集成 Prettier ，以生成漂亮的代码。那为什么不用呢？如果你曾经接触过我的开源项目，你或许会发现我很少使用 Prettier 来格式化源代码。...在这篇文章中，我会尝试给出为什么我要这么做的理由：它是固执己见的 Prettier 形容它自己是 "一个固执己见的代码格式化工具"。...有些时候，当你在 JavaScript 中修改字符串内容时，可能会使该行字符数超过了 printWidth 设置的值，那么 Prettier 就会强制将其换行。...我不认为 Parse 两次代码会更快 ESLint 的自动修复也可以像 Prettier 一样进行格式化 - 还有更自由的选择。替代方案在我的工作流中，ESLint 对确保代码质量来说不可或缺。...配合 IDE 扩展，还可以在保存时触发自动修复。它的工作方式与 Prettier 类似，但当你要换行的时候尊重你的选择，并提供了许多 lint 的最佳实践。

1051 0

是时候提高你的编码效率了【VSCode篇】

俗话说得好，工欲善其事必先利其器，要想工作效率高，码代码的工具用的好是必须的，这里主要说一下 Mac 上 VScode 的快捷键，帮助大家快速搭建良好的开发工具。...必备插件 Auto Close Tag - 自动闭合 HTML 标签 Auto Import - 自动 import 插件 Auto Rename Tag - 修改 HTML 标签时，自动修改匹配的标签..."prettier.singleQuote": true, // 使用tab自动变为2个空格 "prettier.tabWidth": 2, "[html]": { "editor.defaultFormatter...：Cmd+Enter 在当前行上方插入一行：Cmd+Shift+Enter 删除当前行：Cmd+Shift+K 光标相关跳到当前行的头部，尾部：Fn+←（Cmd+←），Fn+→（Cmd+→）跳转一个单词...：option+←，option+→ 插入多光标：Option+click或Cmd+Option+up/Cmd+Option+down 将选择添加到下一个查找匹配: Cmd+D 搜索和替换查找：Cmd

1.4K1 0

vscode下配置vue.js的插件

1、vetur 2、Vue 2 Snippets：主要加强vue的便捷写法 3、language-stylus 4、Auto Close Tag：自动闭合标签所用 5、Auto Rename Tag：自动修改重命名配对的标签...11、JavaScript (ES6) code snippets：用于快速生成ES6代码片段 12、Material Icon Theme：Material风格的icon文件图标 13、One Dark...使用eslint的代码格式进行校验 "prettier.eslintIntegration": true, // #去掉代码结尾的分号 "prettier.semi": false,...} // 格式化stylus, 需安装Manta's Stylus Supremacy插件 // "stylusSupremacy.insertColons": false, // 是否插入冒号...// "stylusSupremacy.insertSemicolons": false, // 是否插入分好 // "stylusSupremacy.insertBraces": false

3.3K2 0

【总结】1165- 前端团队代码规范最佳实践，个人成长必备！

1.2K2 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云