使用 prettier-plugin-sort-imports 优化 import 排序

已于 2023-08-04 15:11:25 修改
阅读量1.9k 收藏 1
点赞数
文章标签： 前端
于 2023-06-11 14:25:55 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lj22377/article/details/131153005
版权

使用 prettier-plugin-sort-imports 优化 import 排序

github
trivago/prettier-plugin-sort-imports: A prettier plugin to sort imports in typescript and javascript files by the provided RegEx order.

常用配置

.prettierrc.cjs

 importOrder: [
    "^react(.*)",
    "antd/(.*)",
    "<THIRD_PARTY_MODULES>",
    "@/(.*)",
    "^[./]"
  ],
  importOrderSeparation: true,
  importOrderSortSpecifiers: true

module.exports = {
  printWidth: 80,
  tabWidth: 2,
  trailingComma: "all",
  singleQuote: false,
  semi: true,
  importOrder: ["^@nestjs/(.*)$", "<THIRD_PARTY_MODULES>", "@/(.*)", "^[./]"],
  importOrderSeparation: true,
  importOrderSortSpecifiers: true,
  importOrderParserPlugins: [
    "typescript",
    "classProperties",
    "decorators-legacy",
  ],
};

错误记录

遇到格式化失效的时候，看是否有报错。
在这里插入图片描述

Decorators Experimental Syntax Error · Issue #120 · trivago/prettier-plugin-sort-imports

eslint 也可以
eslint-plugin-import 真香 - 掘金

相关参考
How to quickly sort imports with Prettier - DEV Community
写一个同事见了会打你的 Prettier 插件 - 知乎

Jasongrass
关注
husky 7 + lint-staged 11+ prettier 2 + eslint 7 配置
CRPER
07-19 1550
前言 基于最新的一些库来规范项目，比如格式化和提交预处理等～ 一些库的最新版的配置更加独立了，对于工程化来说，其实更加直观了～ 围绕react技术栈加入相关门禁来开展文章～ 效果图 git commit 限定 pre-commit 门禁 一般用于拦截提交之前的暂存区变动，进行相关的门禁检测 prettier ESLint 主要就是代码规范化 配置姿势 安装相关依赖 对于我们真实的业务的，一般来说都有沉淀出自己的一套封装；不管是eslint还是commitizen，不过此处我们直接说一个全新没有任何沉淀的
以 Vue 3 项目为例，你是否经常遇到 import 语句顺序混乱的问题？要想解决它其实很容易！
CodeQi技术小栈的博客
07-02 818
通过本文的详细讲解，我们已经学会了如何在 Vue 3 项目中使用 ESLint、Prettier、和来规范 import 语句的顺序。这不仅提升了代码的可读性，还减少了代码提交时的冲突，提升了团队协作效率。我们还进一步优化了 ESLint 配置，并通过 Pre-commit 钩子确保每次提交代码时都能自动格式化 import 语句。看完的朋友可以尝试一下！祝你编码愉快！
配置 .prettier 文件
zhaojjjjjj163的博客
12-02 384
统一项目开发人员的代码格式化问题。
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/(.*)$",
推荐开源项目：Prettier Plugin Sort Imports - 让你的导入语句井然有序
最新发布
gitblog_00771的博客
08-23 312
推荐开源项目：Prettier Plugin Sort Imports - 让你的导入语句井然有序 prettier-plugin-sort-importsA prettier plugin to sort imports in typescript and javascript files by the provided RegEx order. 项目地址:https://gitcode.co...
eslint prettier import sort 排序
齐枫的博客
03-22 1468
使用第三方库 https://github.com/IanVS/prettier-plugin-sort-imports。
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-organize-imports:使用TypeScript语言服务API让Prettier整理您的导入
03-21
更漂亮的插件：组织导入 确保导入语句保持一致，无论是谁编写的以及它们的首选项是什么。 一个插件，使用更漂亮，使您的组织进口（即排序和删除未使用的进口） organizeImports的打字稿语言服务API的功能。这与在VS Code中使用“组织导入”操作相同。 安装 npm install --save-dev prettier-plugin-organize-imports prettier和typescript是对等依赖项，因此请确保已在项目中安装了它们。 用法 该插件将由Prettier自动加载。无需配置。 包含子字符串// organize-imports-ignore // tslint:disable:ordered-imports // organize-imports-ignore或// tslint:disable:ordered-imports被跳过。 基本原理 该插
Prettier 插件：Organize Imports - 保持导入语句整洁有序的神器！
gitblog_00096的博客
05-16 613
Prettier 插件：Organize Imports - 保持导入语句整洁有序的神器！ prettier-plugin-organize-importsMake Prettier organize your imports using the TypeScript language service API.项目地址:https://gitcode.com/gh_mirrors/pr/pret...
eslint-config-yoctol-base:针对ESLint的Yoctol特定基本棉绒规则
05-13
它需要eslint ， eslint-plugin-import ， eslint-plugin-prettier ， eslint-plugin-sort-imports-es6-autofix和prettier 。 安装每个软件包的正确版本，这些版本由以下命令列出： npm info " eslint-config-...
eslint / prettier 检查格式配置、husky / lint-staged 强制校验、tslint 配置
肖的博客
09-25 4430
module.exports = { "extends": "eslint:recommended", // "extends": "plugin:prettier/recommended", "parser":"babel-eslint", "parserOptions":{ "sourceType":"module", "ecma...
eslint-plugin-beautiful-imports:ESLint插件，用于按首字母顺序对导入进行排序
04-26
美丽的进口 此插件严格按照导入声明的第一个字母按字母顺序对导入进行排序。 它基于规则，但有一些区别。 它使您的导入看起来像这样： import 'alice' import 'bob' import * as Ant from 'ant' import * as Bear from 'bear' import Adam from 'adam' import { B as A , C } from 'letters' import David from 'david' import { E , F as H } from 'other-letters' 如果这个项目对您有所帮助，请给我们一个星星 :glowing_star: 安装 您需要安装才能使此插件正常工作，然后安装eslint-plugin-beautiful-imports npm install --save eslint-plugin-beau
vsc-sort-imports:自动对ES6导入进行排序
05-14
排序导入 自动对JavaScript和TypeScript的ES6导入进行排序。 由从软件包移植而来。 特征 保存时自动对导入进行排序。 您可以在设置中禁用此行为并手动对导入进行排序： 启动命令面板（ Ctrl/Cmd + Shift + P ）； 输入排序导入 您也可以保存文档而不保存导入。 如果启用了自动保存，但是不想对特定文件中的导入进行排序，这可能会变得很方便： 启动命令面板（ Ctrl/Cmd + Shift + P ）； 输入保存文件而不对导入进行排序 扩展设置 此扩展名具有以下设置： sort-imports.default-sort-style ：如果package.json没有import-sort键（默认值： eslint ）， eslint排序样式。 sort-imports.on-save ：启用/禁用保存时自动排序（默认值： true ）。 sort
前端开源库-eslint-plugin-sort-imports-es6-autofix
08-30
前端开源库-eslint-plugin-sort-imports-es6-autofixeslint-plugin-sort-imports-es6-autofix，一个排序导入规则，可以正确区分es6导入类型。
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
eslint-plugin-organize-imports：eslint插件，用于强制执行订单，对进口分组和注释（如果需要）
01-30
eslint-plugin-organize-imports： eslint插件，用于将相似模块进行分组以及这些组的关联注释和顺序。 问题： 当文件顶部存在大量导入时，很难识别文件是否已经导入并导致重复的导入。 为防止这种情况，可以使用此皮棉规则来组织进口 用法： npm install --save-dev eslint-plugin-organize-imports 插件行动-vscode 配置/选项模式： orderRules （必需）每个导入组的配置数组 moduleType （必需）字符串，表示错误消息中的模块组。 nodeModule是预定义的值，用于表示外部依赖项空格。 include - （必需）的路径数组（glob模式支持），该群归类匹配模块插入到进口组 exclude （可选）路径数组（支持全局模式），避免将匹配的模块归类到导入组中 comment （可选）作为评论正文的字符串。 规则在修剪评论主体后检查是否相等 pathAliases （可选）以支持诸如babel-plugin-module-alias以及其他任何webpack插件之类的用例，这些用例会
Prettier Plugin Sort Imports：打造整洁的导入排序
gitblog_00249的博客
08-21 794
Prettier Plugin Sort Imports：打造整洁的导入排序 prettier-plugin-sort-importsA prettier plugin to sort imports in typescript and javascript files by the provided RegEx order. 项目地址:https://gitcode.com/gh_mirror...
推荐使用：Prettier 插件排序导入
gitblog_00035的博客
05-18 391
推荐使用：Prettier 插件排序导入 prettier-plugin-sort-importsAn opinionated but flexible prettier plugin to sort import statements项目地址:https://gitcode.com/gh_mirrors/pre/prettier-plugin-sort-imports 如果你在寻找一个能够自动...
在vscode中如何使用prettier-code formatter
07-11
在 VSCode 中使用 Prettier Code Formatter 插件，你可以照以下步骤进行操作： 1. 打开 VSCode，左侧的扩展按钮（或按下Ctrl + Shift + X` 快捷键打开扩展面板。 2. 在框中输入 "Prettier - Code formatter 并点击结果中的进行安装。 3 安装完成后，点击展面板左上角的齿轮图标，选择 "Extension Settings"，在搜索框中输入 "Prettier" 来找到插件的相关设置。 4. 在设置中，你可以根据自己的需求进行配置。比如，你可以设置 Prettier 作为默认的代码格式化工具、设置保存时自动格式化代码等。 5. 确保你的项目中已经安装了 Prettier，如果没有安装，可以在终端中使用以下命令进行安装（需要先安装 Node.js）： ``` npm install --save-dev prettier ``` 6. 现在，当你打开一个支持的文件（如 JavaScript、TypeScript、CSS、HTML 等），Prettier 将自动格式化代码。你可以使用快捷键 `Shift + Alt + F`（或右键点击编辑器并选择 "Format Document"）来手动触发格式化。 这样，你就可以在 VSCode 中使用 Prettier Code Formatter 进行代码格式化了。希望对你有帮助！
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值