开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

VSCode Prettier不再在JS中换行

VSCode Prettier是一个在Visual Studio Code中使用的代码格式化工具。它可以帮助开发者自动格式化代码，使其符合统一的编码风格，提高代码的可读性和可维护性。

在JS中，换行是代码编写中常见的格式之一，可以用于提高代码的可读性和组织结构。然而，有时候过多的换行可能会导致代码过于冗长，影响代码的可视范围和阅读体验。

当使用VSCode Prettier进行代码格式化时，它默认会根据预设的规则对代码进行格式化，包括换行。如果在JS中使用VSCode Prettier后发现不再有换行，可能是由于以下原因：

Prettier的配置：VSCode Prettier可以通过配置文件或者VSCode的设置来自定义格式化规则。如果配置中设置了不换行的规则，那么在JS中使用Prettier时就不会再有换行。
代码中的特殊情况：有些情况下，代码中可能存在特殊的语法或者注释，导致Prettier无法自动换行。这种情况下，可以通过在代码中添加特定的注释或者使用Prettier提供的特殊语法来控制换行的行为。

总结起来，VSCode Prettier在JS中不再换行可能是由于配置的规则或者代码中的特殊情况导致的。如果需要在JS中使用Prettier并保留换行，可以通过调整Prettier的配置或者使用特殊语法来实现。

腾讯云相关产品推荐：

云服务器（CVM）：提供可扩展的云服务器实例，适用于各种规模的应用场景。详情请参考：腾讯云云服务器
云数据库 MySQL 版（CDB）：提供高性能、可扩展的云数据库服务，适用于各种规模的应用场景。详情请参考：腾讯云云数据库 MySQL 版
云原生容器服务（TKE）：提供高可用、弹性伸缩的容器集群管理服务，适用于容器化应用的部署和管理。详情请参考：腾讯云云原生容器服务

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

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

**/build/ 忽略所有子目录中的 build 目录 directory/file.* 忽略指定目录下匹配的所有文件类型 src/**/*.test.js 忽略 src 目录下所有 .test.js...important.js 表示不忽略 important.js 文件 /node_modules/ 通常用于忽略第三方依赖目录 node_modules/ 忽略所有依赖 /dist/ 忽略打包输出目录...dist/ 忽略构建生成的文件 path/**/file 忽略路径中所有子目录下匹配的文件 src/**/test.js 忽略 src 中所有子目录下的 test.js 文件总结Prettier 如图...然后再项目的外面的位置添加这两个文件就能使用Prettier啦。但是光有Prettier还不够，因此我们接下来需要在vscode中的setting设置使用Prettier为自动格式化工具。...VSCode中setting设置从字面意思来看也能知道setting的作用就是个性化你的VSCode，而且在项目中有一个setting设置，那么所有人都会使用统一个VSCode设置进行开发。

1421 0

你的代码好看吗

这里已vscode为例进行说明，下面的配置是我自己的对于HTML/CSS/JS/LESS文件的prettier格式化规则： { // 使能每一种语言默认格式化规则 "[html]": { "editor.defaultFormatter...": "esbenp.prettier-vscode" }, /* prettier的配置 */ "prettier.printWidth": 100, // 超过最大值换行 "prettier.tabWidth...": ["vue"], // 不格式化vue文件，vue文件的格式化单独设置 "prettier.endOfLine": "auto", // 结尾是 \n \r \n\r auto "prettier.eslintIntegration...你没法使用类似格式化html/css/js的方式来格式化vue格式的代码，像下面这样子的： { "[vue]": { "editor.defaultFormatter": "esbenp.prettier-vscode...也就是说，如果你在一个项目中有 .prettierrc 配置文件，然后你又在settings.json也配置了格式化规则，那么当你在vscode编辑器中对一个文件点击鼠标右键[格式化文档]的时候，格式化规则会以

1.3K2 0

一款超人气代码格式化工具prettier

这里已vscode为例进行说明，下面的配置是我自己的对于HTML/CSS/JS/LESS文件的prettier格式化规则： { // 使能每一种语言默认格式化规则 "[html]": {.../* prettier的配置 */ "prettier.printWidth": 100, // 超过最大值换行 "prettier.tabWidth": 4, // 缩进字节数...": ["vue"], // 不格式化vue文件，vue文件的格式化单独设置 "prettier.endOfLine": "auto", // 结尾是 \n \r \n\r auto "...你没法使用类似格式化html/css/js的方式来格式化vue格式的代码，像下面这样子的： { "[vue]": { "editor.defaultFormatter": "esbenp.prettier-vscode...也配置了格式化规则，那么当你在vscode编辑器中对一个文件点击鼠标右键[格式化文档]的时候，格式化规则会以 .prettierrc 为准。

3.9K2 0

VS Code书写vue项目配置 eslint+prettier 统一代码风格

当然工具么，没有谁好谁坏了~~ 不盲目站队，适合自己的就是最好的。...目标是：Eslint校验代码语法，prettier统一格式化代码，按下保存自动修复eslint错误，自动格式化代码（因为懒~）安装vscode插件首先，需要安装 Vetur、ESLint、Prettier...- Code formatter这三个插件，安装完重启下，防止插件不生效。...": "js-beautify-html", //js-beautify-html格式化配置，属性强制换行 "vetur.format.defaultFormatterOptions":...所以要解决冲突就需要在Prettier的规则配置里也配置上和ESLint一样的规则，直接覆盖掉，ESLint和Prettier的配置文件内容如下： .eslintrc.js 配置使用单引号、结尾不能有分号

7.3K6 0

Prettier格式化配置

HTML/CSS/JS/LESS 文件的 prettier 格式化规则 { // 使能每一种语言默认格式化规则 "[html]": { "editor.defaultFormatter...": "esbenp.prettier-vscode" }, "[css]": { "editor.defaultFormatter": "esbenp.prettier-vscode..."prettier.printWidth": 100, // 超过最大值换行 "prettier.tabWidth": 4, // 缩进字节数 "prettier.useTabs": false...": ["vue"], // 不格式化vue文件，vue文件的格式化单独设置 "prettier.endOfLine": "auto", // 结尾是 \n \r \n\r auto "..."prettier.jsxBracketSameLine": false, // 在jsx中把'>' 是否单独放一行 "prettier.jsxSingleQuote": false,

3.2K2 1

vscode代码整理插件_vscode安装离线插件

中使用Less方法：在vsCode插件管理搜索插件 Easy LESS安装，（如没安装node.js先安装一下）在项目根目录如没有.vscode目录，需要创建.vscode目录，添加一个配置文件：settings.json...– Code formatter（格式化插件）在vscode左下角图标打开设置搜索settings 点击在settings.json中编辑在里面配置 /* prettier的配置 */..."prettier.printWidth": 100, // 超过最大值换行 "prettier.tabWidth": 4, // 缩进字节数 "prettier.useTabs": false, /...": ["vue"], // 不格式化vue文件，vue文件的格式化单独设置 "prettier.endOfLine": "auto", // 结尾是 \n \r \n\r auto "prettier.eslintIntegration...本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请发送邮件至举报，一经查实，本站将立刻删除。

1.5K3 0

小程序开发格式化代码ESLint、Prettier、husky、lint-stage

--ext .js,.wxs,.sjs", "prettier:fix": "prettier --config .prettierrc.js --write './**/*....{js,sjs,wxs,css,wxss,acss,wxml,axml,less,scss,json}'", "format:all": "npm-run-all -s prettier:fix...{js,wxs,sjs}": [ "prettier --config .prettierrc.js --write", "eslint --fix --ext .js"...{json,wxml,axml,css,wxss,acss,wxml,axml,less,scss}": "prettier --config .prettierrc.js --write" } vscode...的 eslint "eslint.options": { // 指定 vscode 的 eslint 所处理的文件的后缀 "extensions": [".js", "

2.4K2 0

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

文件中写入内容： const a = "13" function add() { return "1" } 然后在终端运行格式化命令： $ npx prettier --write index.js...不同点：ESLint 会在检查时对不规范的代码提示错误；而 Prettier 会直接按照规范格式化代码。所以，ESLint 和 Prettier 定义的规范要一致，不能冲突。...猜对了，当然有插件，插件全名叫 Prettier - Code formatter，截图如下，在 VSCode 中搜索安装即可。 Prettier 插件安装之后会作为编辑器的一个格式化程序。...在代码中右键格式化，就可以选择 Prettier 来格式化当前代码。如果要想 Prettier 实现自动化，则还需要在编辑器中配置。...变量命名：下划线 user_id CSS-Class 命名：中划线 user-id 方法函数命名：小驼峰 userId JS-Class 命名：大驼峰 UserId 文件夹命名：中划线 user-id

1K2 0

Eslint配置

install --save-dev eslint-config-prettier 配置项目根目录中添加.eslintrc.js 该配置文件修改时，项目重新运行时才会生效。.../bin .eslintrc.js prettier.config.js /src/mock/* 开发工具配置 IDEA 下面的两种方式都有这么一个问题执行的时候相当于执行Save的同时执行eslint...方式2 首先点击 Edit => Macros 进入录制状态在我们的代码页面右键点击Fix ESLint Problems,再点击菜单中的File=>Save All进行保存这里不建议直接点击Ctrl...注意：这里快捷键是可以设置为Ctrl+S的，因为宏中记录的不是快捷键而是快捷键对应的操作。 VSCode 先把自带的格式化取消掉，否则两个会冲突。...在 VSCode 中，默认 ESLint 并不能识别 .vue、.ts 或 .tsx 文件，需要在「文件 => 首选项 => 设置」里做如下配置： { "eslint.validate": [

2.8K1 0

VSCode常用的插件

这篇文章记录的是目前在学前端过程中安装的插件，因此会不断更新参考：第一篇：前端VSCode常用插件-快捷键-以及常用技巧-pink老师 vscode之所以被称为宇宙第一神器，其中丰富的插件功不可没，安装起来超级简单...注意，**新手学习期间，不建议安装形形色色的插件，用到啥就安装啥。**因为有些插件会到vue学习的时候引起冲突，所以这里我就介绍几个常用的插件。...格式化代码（vscode系统自带）现在格式化代码的插件非常多，比如Prettier等等。..., // 每行文字个数超出此限制将会被迫换行 "prettier.printWidth": 300, // 使用单引号替换双引号 "prettier.singleQuote": true, "prettier.arrowParens...": "avoid", // 设置 .vue 文件中，HTML代码的格式化插件 "vetur.format.defaultFormatter.html": "js-beautify-html", "vetur.ignoreProjectWarning

2832 0

VScode 配置记录

": "vscode-icons", // 允许在任何文件中设置断点 "debug.allowBreakpointsEverywhere": true, // 控制概述标尺周围是否要绘制边框...) // - "bounded" (在视区宽度和 "editor.wordWrapColumn" 两者的较小者处换行)。...], "editor.renderControlCharacters": true, "[html]": { "editor.defaultFormatter": "esbenp.prettier-vscode..." }, "[yaml]": { "editor.defaultFormatter": "esbenp.prettier-vscode" }, "[mdx]": { "editor.defaultFormatter...中调试js代码 #Debugger for Chrome ESLint 语法校验 #ESLint Vetur，Vue开发者必备 #Vetur

1K3 0

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

文件中写入内容： const a = "13" function add() { return "1" } 然后在终端运行格式化命令： $ npx prettier --write index.js...不同点：ESLint 会在检查时对不规范的代码提示错误；而 Prettier 会直接按照规范格式化代码。所以，ESLint 和 Prettier 定义的规范要一致，不能冲突。...猜对了，当然有插件，插件全名叫 Prettier - Code formatter，截图如下，在 VSCode 中搜索安装即可。...如果要想 Prettier 实现自动化，则还需要在编辑器中配置。编辑器配置 VSCode 中有一个用户设置 setting.json 文件，其中保存了用户对编辑器的自定义配置。...变量命名：下划线 user_id CSS-Class 命名：中划线 user-id 方法函数命名：小驼峰 userId JS-Class 命名：大驼峰 UserId 文件夹命名：中划线 user-id

1.2K2 0

前端团队代码规范最佳实践，个人成长必备！

文件中写入内容： const a = "13" function add() { return "1" } 然后在终端运行格式化命令： $ npx prettier --write index.js...不同点：ESLint 会在检查时对不规范的代码提示错误；而 Prettier 会直接按照规范格式化代码。所以，ESLint 和 Prettier 定义的规范要一致，不能冲突。...猜对了，当然有插件，插件全名叫 Prettier - Code formatter，截图如下，在 VSCode 中搜索安装即可。...如果要想 Prettier 实现自动化，则还需要在编辑器中配置。编辑器配置 VSCode 中有一个用户设置 setting.json 文件，其中保存了用户对编辑器的自定义配置。...变量命名：下划线 user_id CSS-Class 命名：中划线 user-id 方法函数命名：小驼峰 userId JS-Class 命名：大驼峰 UserId 文件夹命名：中划线 user-id

6811 0

【Vscode】前端项目文件自动格式化(.Vue，.js)

保存自动格式化 JavaScript中，双引号自动改单引号，分号自动去掉 vue，模板中标签属性换行 2.安装插件 2.1 Prettier 它通过解析代码并使用自己的规则重新打印它，并考虑最大行长来强制执行一致的样式...和Eslint结合，检测代码中潜在问题的同时，还能统一团队代码风格，从而促使写出高质量代码，来提升工作效率。...",//默认终端shell "go.formatTool": "goimports",//golang格式化工具 "editor.defaultFormatter": "esbenp.prettier-vscode...", //格式化.vue中html "vetur.format.defaultFormatter.js": "vscode-typescript", //让vue中的js按编辑器自带的ts格式进行格式化...itemName=esbenp.prettier-vscode https://www.jianshu.com/p/d98e0b0139fb?

3K1 0

【云+社区年度征文】vscode里开发vue项目需要安装的插件

在开发编辑器中，vscode占有的比重越来越高，相比笨重的webstorm和功能不怎么全的subline，优势太明显。所以我们需要掌握vscode里开发项目一些小技巧。...今天来了解下vue在vscode里的设置。在vscode里开发vue项目需要安装的插件：eslint。大家都知道默认的设置会比较蛋疼，只要你有点空格或者换行啥的，就是提示报错，这肯定不能接受的。...1、实现这样的条件 (vue脚手架安装的时候需要选中 eslint +prettier 这个选项) 在vscode上安装三个插件 eslint 代码质量检测插件 prettier 规则可以自定义...文件在rules 里面加入下面的话是我们自定义的规则： rules: { 'prettier/prettier': [ 'error', { semi: false, //... 我这里设置160 } ] } 4、运行测试在我们的怕package.json文件中的。

7902 0

VSCode代码格式化设置

VSCode代码格式化设置安装插件 ESLint、Prettier-code formatter、Vetur ?...一、配置setting.json文件 // tab 大小为2个空格 "editor.tabSize": 2, // 100 列后换行 "editor.wordWrapColumn": 100..., // 选择 vue 文件中 template 的格式化工具 "vetur.format.defaultFormatter.html": "prettier", // 显示 markdown...// 让函数(名)和后面的括号之间加个空格 "javascript.format.insertSpaceBeforeFunctionParenthesis": true, // 让vue中的...js按编辑器自带的ts格式进行格式化 "vetur.format.defaultFormatter.js": "vscode-typescript", // vetur 的自定义设置 "vetur.format.defaultFormatterOptions

4.2K2 0

使用eslint + prettier + husky + lint-staged 约束项目的最佳实践！

" }} vscode展示如下图，表示开启成功在package.json中新增命令： "lint": "eslint --fix ./ --ext .ts --ext .js", 测试执行npm...run lint 随便修改一个文件再执行npm run lint 可以看到已经报错了~ 配置成功 prettier 概念 prettier是一个代码格式化工具，配合vscode自动保存可以保证代码风格的统一...文件 // .lintstagedrc.jsmodule.exports = { '*.js': ['prettier --config .prettierrc.js --write', 'eslint...--fix --ext .js'], '*.ts': ['prettier --config .prettierrc.js --write', 'eslint --fix --ext .ts'],...'*.json': 'prettier --config .prettierrc.js --write'} 全部完成以后，当执行git commit -m "xxx"命令时，会对add的文件进行prettier

1.7K2 1

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

VSCode 安装 Eslint插件。添加 .eslintrc.js 配置文件。更改 VSCode 的 setting.json 文件的配置。...想让 prettier 生效，需要我们在 VSCode 里配置： // 所有文件都使用 prettier 格式化 "editor.defaultFormatter": "esbenp.prettier-vscode...", // 只对 js 文件使用 prettier "[javascript]": { "editor.defaultFormatter": "esbenp.prettier-vscode"...} // 所有文件都不指定自动格式化方式 "editor.defaultFormatter": null, // js文件不指定自动格式化方式 "[javascript]": { "editor.defaultFormatter...": null } 可以使用 .prettierrc 文件、VSCode 的 setting.json 、.editorConfig 来配置 prettier。

2.5K3 0

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

// 界面配置路径 Text Editor "editor.wordWrap": "bounded", // 设置超过word Wrap Column设置的字符数、达到视口最小宽度，时自动换行...": "esbenp.prettier-vscode" }, "[css]": { "editor.defaultFormatter": "esbenp.prettier-vscode"...": "esbenp.prettier-vscode" }, "[vue]": { "editor.defaultFormatter": "esbenp.prettier-vscode"...(formatter)： prettier: For css/scss/less/js/ts. prettier: For pug. prettier-eslint : For js....运行prettier 和eslint --fix. stylus-supremacy : For stylus. vscode-typescript: 针对 js/ts.

6.9K2 0

一套标准的前端代码工作流

配置文件 Prettier 支持 .prettierrc 为名称，以 .yaml .yml .json .js 为后缀的的配置文件，当然你也可以使用 package.json 文件中的 Prettier...和utf-16le，不建议使用utf-8-bom trim_trailing_whitespace 设为true表示会去除换行行首的任意空白字符。...集成我使用的是 VSCode ，来给它添加魔法，加 EditorConfig ， Eslint ， Prettier ， Git 扩展。...配置 { // 设置全部语言的默认格式化程序为prettier "editor.defaultFormatter": "esbenp.prettier-vscode", // 设置特定语言的默认格式化程序为...prettier "[javascript]": { "editor.defaultFormatter": "esbenp.prettier-vscode" } } ESLint配置 {

1.3K2 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭