配置 .prettier 文件

最新推荐文章于 2024-08-21 11:39:00 发布
最新推荐文章于 2024-08-21 11:39:00 发布
阅读量379 收藏 9
点赞数 10
分类专栏： WEB 文章标签： javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zhaojjjjjj163/article/details/134747548
版权
本文介绍了如何使用Prettier配置工具解决团队中代码格式一致性问题，包括printWidth、tabWidth等设置，并强调了@trivago/prettier-plugin-sort-imports插件在自动排列import的重要性，以及如何通过npminstall安装该插件。
摘要由CSDN通过智能技术生成

 统一项目开发人员的代码格式化问题

{
    "printWidth": 400,
    "tabWidth": 4,
    "useTabs": false,
    "semi": true,
    "bracketSameLine": true,
    "quoteProps": "preserve",
    "trailingComma": "all",
    "singleQuote": true,
    "importOrderSeparation": true,
    "importOrderSortSpecifiers": true,
    "plugins": ["@trivago/prettier-plugin-sort-imports"],
    "importOrder": ["^@core/(.*)$", "<THIRD_PARTY_MODULES>", "^@ui/(.*)$", "^[./]"]
}
  • 配置 import 的自动排列
npm install --save-dev @trivago/prettier-plugin-sort-imports

zhaojjjjjj163
关注
专栏目录
eslint配置详解
小木Blog
04-30 5555
前言 最近在实习期间犯了几个很弱智的错，一方面是自己的不小心， 另一方面也是项目的代码规范性检查不好。为了实现项目代码的规范性，降低出错率。 自己特别提出在commit之前加上一个eslint的代码检查，以确包上线代码中不会出现很低级的错误。 开始 git有一种钩子机制， 例如这里我们即将用到的pre-commit. 首先我们需要安装pre-commit： npm install pre-comm...
js 格式化prettier配置_代码格式化工具---prettier配置
weixin_35315373的博客
12-23 3053
我自己的常用 prettier 配置如下：// .prettierrc 文件// 这里修改的都是与默认值不同的，没有修改到的就是启用默认值// .prettierrc 文件是使用 json 格式，如果报错了，该配置文件在编辑器里面是不会生效的{"bracketSpacing": true,"printWidth": 160,"semi": false,"singleQuote": true}其他还...
自动修复 import 排序 （ autofix sort import/export ）
weixin_42317878的博客
08-26 8408
自动修复 import 排序 import/export 按一定的规则排序，既让代码美观，也让开发者更好的维护代码，目前自动修复import/export主要有以下两种： 基于eslint 规则的 eslint-plugin-simple-import-sort 自动导入排序和校验； 基于 prettier 的 plugin @trivago/prettier-plugin-sort-imports 自动导入排序； eslint-plugin-simple-import-sort yarn
前端项目规范化：手把手教你使用prettier和pre-commit（git hook或者husky）优化规范项目代码
tangdou369098655的博客
06-25 3363
下图为git hooks的官方示例，以.sample结尾。注意这些以.sample结尾的示例脚本是不会执行的，重命名后会生效是一些自定义的脚本，用于控制git工作的流程，分为客户端钩子和服务端钩子。客户端钩子包括：pre-commit、prepare-commit-msg、commit-msg、post-commit等，主要用于控制客户端git的提交工作流。服务端钩子：pre-receive、post-receive、update，主要在服务端接收提交对象时、推送到服务器之前调用。
【Prettier】代码格式化工具Prettier的使用和配置介绍
qq_2511276124的博客
08-21 3228
前段时间，因为项目的prettier的配置和eslint格式检查有些冲突，在其prettier官网和百度了一些配置相关的资料，在此做一些总结，以备不时之需。
推荐使用：Prettier 插件排序导入
gitblog_00035的博客
05-18 387
推荐使用：Prettier 插件排序导入 prettier-plugin-sort-importsAn opinionated but flexible prettier plugin to sort import statements项目地址:https://gitcode.com/gh_mirrors/pre/prettier-plugin-sort-imports 如果你在寻找一个能够自动...
prettier-plugin-sort-imports:一个漂亮的插件，用于按提供的RegEx顺序对Typescript和javascript文件中的导入进行排序
05-12
漂亮的插件排序导入 一个漂亮的插件，用于按提供的RegEx顺序对导入声明进行排序。 输入 输出 安装 npm npm install --save-dev @trivago/prettier-plugin-sort-imports 或者，使用纱线 yarn add --dev @trivago/prettier-plugin-sort-imports 用法 在更漂亮的配置文件中添加订单。 module.exports = { "printWidth": 80, "tabWidth": 4, "trailingComma": "all", "singleQuote": true, "jsxBracketSameLine": true, "semi": true, "importOrder": ["^@core/(.*)$", "^@server/(.*)$",
[vue]：设置 editor.defaultFormatter 为 esbenp.prettier-vscode，确保使用 Prettier 格式化 .vue 文件。
最新发布
09-26
如果你想让`.vue`文件使用Prettier进行格式化，你需要首先安装 `esbenp.prettier-vscode` 插件，它是Prettier的一个VS Code扩展。 以下是步骤： 1. **安装**： 在项目目录下打开终端，运行以下命令安装 `esbenp....
vscode中eslint插件的配置（prettier配置无效）
10-16
VS Code（Visual Studio ...解决方法是调整配置文件，或直接在项目根目录下添加.prettier文件，以确保使用正确的格式化规则。此外，合理配置ESLint和Prettier，可以使它们在维护代码质量与风格统一上发挥最大的效用。
esbenp.prettier-vscode
08-07
而引用中的配置说明了如何在vscode的setting.json文件中添加配置以启用esbenp.prettier-vscode插件的格式化功能。具体配置如下： ``` "[html": { "editor.defaultFormatter": "esbenp.prettier-vscode" }, "[css": ...
vs code中 prettier 对js不起作用设置
12-31
vs code中 prettier 对 .vue 文件格式化有效果，但是对 .js 文件不起作用，此方法能有效地解决此问题。
prettier-plugin-import-sort:更漂亮的插件可以通过import-sort传递javascript和typescript
05-03
漂亮的插件导入排序 这是插件，用于使用对javascript和typescript文件进行。 安装 $ npm i -D prettier prettier-plugin-import-sort 您还需要安装自己选择的导入排序样式模块，例如： $ npm i -D import-sort-style-module 然后，您将需要可用的导入排序的配置，例如package.json中的类似内容 " importSort " : { " .js, .jsx, .ts, .tsx " : { " style " : " module " } } 如果您使用的是打字稿，则可能还需要指定打字稿解析器。 这在某种程度上取决于所使用的打字稿功能（例如装饰器），例如 " importSort " : { " .js, .jsx, .ts, .tsx " : {
prettier-plugin-sorted:使用自动别名支持，以更漂亮的方式对JavaScript和TypeScript导入进行排序
05-17
漂亮的插件排序 一个优雅的漂亮插件，用于对导入进行排序。 默认情况下，它会自动检查您的打字稿tsconfig配置并对别名进行排序。 目录 贡献者 致谢 用法 prettier-plugin-sorted是一个prettier插件，用于自动对所有JavaScript和TypeScript导入进行排序。 它使用import-sort并允许零配置设置，这对于大多数设置来说应该足够了。 按以下顺序对模块进行排序。 没有成员的导入将在文件顶部保留未排序的状态。 这些往往有副作用，其顺序很重要。 import 'tolu'; 节点模块导入。 import { join } from 'path'; 绝对模块导入（但不是别名）。 import main from 'main'; 从tsconfig.json和extraAliases设置获取的tsconfig.json extraAlias
2022 最快的前端开发工具总结
法克瓜的博客
10-19 1574
Jest、Yarn 核心成员 Christoph Nakazawa 最近发布了他认为的 2022 前端最「快」的开发工具链。
vscode配置文件之.prettierrc
xiliuhu的专栏
06-22 443
{ "tabWidth": 2, "printWidth": 120, "singleQuote": true, "jsxSingleQuote": true, "semi": false, "trailingComma": "none", "jsxBracketSameLine": true, "importOrder": ["^react", "^", "^@/", "^[./]"], "importOrderSeparation": true, "experimentalBabel
web学习笔记05-EsLint规则与配置
热门推荐
点柈
01-12 1万+
1.EsLint规则    ESLint Rules    所有的规则默认都是禁用的。在配置文件中，使用 "extends": "eslint:recommended" 来启用推荐的规则，报告一些常见的问题，在下文中这些推荐的规则都带有一个✔️标记。Possible Errors下面的规则指出了你可能犯错误的地方。 comma-dangle: 要求或禁止末尾逗号 no-cond-assign: 禁止
Prettier 参数配置
勇敢的豆沙包
04-02 2701
prettierrc.js module.exports = { // 一行最多 100 字符 printWidth: 100, // 关闭 tab 缩进 useTabs: false, // 使用 2个tab 缩进 tabWidth: 2, // 行尾需要有分号 semi: true, // 使用单引号 singleQuote: true, // 对象key是否使用引号 <as-needed|consistent|preserve> // as-
最清晰的配置! VSCode + Eslint + Prettier 语法检查+代码格式化!
♡ 脚下的每一步都叫远方 ♡
07-09 7296
文章目录前言1.> prettier - 格式化代码2.> eslint - js代码检查3.> eslint + prettier 4.> ***** vscode 集成配置 eslint+prettier 前言 全文分为四部分, 分别为 prettier的使用, eslint的使用, prettier + eslint 的使用, 使用 vscode 的 prettier插件 来代替 prettier 格式化 , 然后再 eslint 只检测语法错误 ( 重点 ). 1.
js 格式化prettier配置_Prettier 代码格式化插件 -- 配置翻译
weixin_35457595的博客
12-23 2175
1. 简介：一款 Opinionated「预设立场型」的代码格式化工具，支持以下语言：题外：Opinionated 这个词我反复斟酌，实在不知如何翻译才好。即使是英文中大家讨论的也很激烈，非一句半句说的清楚，可以看看参考链接。在 FCC 群请教过，有位前辈回复我 「预设立场型」软件。我觉得翻译的很好。如果你这样写：Prettier 会帮你格式化成：2. 安装yarnnpmIDE 安装直接在 plu...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值