sbeator / sort-js-object-keys

This is a VS code extension to alphabetically sort the keys in selected js objects keys in your code.

Sort JS Object Keys README

This is a VS code extension to alphabetically sort the keys in selected js objects keys in your code.

It supports:

• The latest ECMAScript version enabled by default (ES2017).
• Typescript.
• Comment attachment.

Usage

1. Select a js object in your source
   Note: it uses full lines so ensure the selected lines are a valid js object, start from the "{" and end from the "}"
2. Run the extension command
   • Sort JS object keys
     Keybinding: Alt+S
   • Sort JS object keys (Reverse)

Reference

Use @babel/parser to parse the code, and sort the parsed code, then use @babel/generator to genertate the code back to document

sort-js-object-keys's Issues

Sort keys naturally

Sorts alphabetically but groups multi-digit numbers (Wikipedia)
For example, currently

{
  "qwe1": "qw",
  "qwe3": "we",
  "qwe7": "qw"
}

Using sortJsObjectKeys.sortJsObjectKeys to sort, the order won't change, but with natural sort, it'll be sorted to

  "qwe1": "qw",
  "qwe3": "we",
  "qwe7": "qw"
}

[BUG] Spreads are improperly sorted

Description

Sorting an object with spreads results in fields in the wrong order, altering the result.

Given these objects:

const objA = {
  h: 1080,
  w: 1600
}

const objB = {
  ...objA,
  w: 1920
}

sorting objB with the extension results in

const objB = {
  w: 1920,
  ...objA
}

which is incorrect, as the new fields are no longer overwriting those in the spread object.

Expected result

const objB = {
  ...objA,
  w: 1920
}

objB === { h: 1080, w: 1920 }

Actual result

const objB = {
  w: 1920,
  ...objA
}

objB === { h: 1080, w: 1600 }

Environment

macOS Big Sur 11.6 (20G165)
VSC 1.62.0

Request: support ES6 spread syntax

Hello again!

I've been using this tool in VSCode a lot and it's great!

I ran into another edge case, this time with ES6 object spread syntax.
Here is an example that will cause it to fail:

const otherObj = {};

const obj = {
  ...otherObj,
  a: 'a',
  b: 'b'
};

Support for trailing commas

The extension is removing trailing commas after sorting an object.
We use the tslint rule for trailing commas, which is great when it comes to new additions to an object when viewing in PRs/version control.
It's not an official rule, therefore I assume it should be an option in this extension if it was implemented.
We're in a typescript/nodejs environment.

error when an object has destructuring

Hi! the plugin can't sort objects when some element is a destructuring thing:

let object = {
  someOb: {...ObjToDestructuring},
  anOtherElement: {},
  otherThird: {}
}

Support ES6 Default Parameters

The use of ES6 default parameters causes the tool to throw an error. I know this isn't actually a true JavaScript object, but the syntax is very similar and it would be great if it was supported. The following is currently not permitted by the tool:

const {
   b = 2,
   a = 1
} = someObject;

Error: Please make sure your selected text is a JS object!

Strings with single quote characters

Tried your extension for sorting some objects containing string values. It does not work correctly when a string contains a single quote character, such as in the string 'shouldn\'t'. Works fine in other cases though, thanks!

Doesn't sort some objects in .vue files

Hello there 🤗

would be cool if this could sort javascript objects like in Vue.js:

{
    ...mapState('A', ['B']),
    computeSeries() {},
}

Can't seem to get to work, error Please make sure your selected text is a JS object!

I can't seem to get this plugin to work. At first, I thought it was because my js object was a rather complex one (lots of functions, comments, etc.). So I tried a very simple object and still no luck. Then I though it might be because I'm using it in a .ts file, not a .js file. But the simple example doesn't work in that either.

Running >Sort JS Object Keys with the following selected:

const test = {
  two: "no",
  one: "yes",
};

Results in:

Please make sure your selected text is a JS object!

Is anyone able to get this to plugin to work? Or get it to work with typescript?

'r' key not working

Type: Bug

In vs code my keyboard 'r' key not working but ' Shift + r ' key is working, this issue is only in vs code because of zengxingxin.sort-js-object-keys as an extention creating this issue .

Extension version: 1.0.6
VS Code version: Code 1.82.1 (6509174151d557a81c9d0b5f8a5a1e9274db5585, 2023-09-08T08:45:05.575Z)
OS version: Windows_NT x64 10.0.22621
Modes:

System Info

Item	Value
CPUs	11th Gen Intel(R) Core(TM) i5-1135G7 @ 2.40GHz (8 x 2419)
GPU Status	2d_canvas: enabled canvas_oop_rasterization: enabled_on direct_rendering_display_compositor: disabled_off_ok gpu_compositing: enabled multiple_raster_threads: enabled_on opengl: enabled_on rasterization: enabled raw_draw: disabled_off_ok video_decode: enabled video_encode: enabled vulkan: disabled_off webgl: enabled webgl2: enabled webgpu: enabled
Load (avg)	undefined
Memory (System)	15.73GB (5.29GB free)
Process Argv	--crash-reporter-id 871603f2-da46-4202-a551-7c55a84f16c3
Screen Reader	no
VM	0%

A/B Experiments

vsliv368:30146709
vsreu685:30147344
python383cf:30185419
vspor879:30202332
vspor708:30202333
vspor363:30204092
vslsvsres303:30308271
vserr242:30382549
pythontb:30283811
vsjup518:30340749
pythonptprofiler:30281270
vshan820:30294714
vstes263:30335439
vscod805:30301674
binariesv615:30325510
bridge0708:30335490
bridge0723:30353136
vsaa593cf:30376535
pythonvs932:30410667
vsclangdc:30486549
c4g48928:30535728
dsvsc012cf:30540253
pynewext54:30695312
azure-dev_surveyone:30548225
vscccc:30803845
3biah626:30602489
89544117:30613380
2i9eh265:30646982
showlangstatbar:30737416
962ge761:30835153
a2ce3375:30757347
pythonfmttext:30731395
fixshowwlkth:30771522
showindicator:30805244
pythongtdpath:30769146
i26e3531:30792625
pythonnosmt12:30797651
pythonidxpt:30805730
pythonnoceb:30805159
dsvsc013:30795093
dsvsc014:30804076
diffeditorv2:30821572
dsvsc015cf:30829746

几个小建议

1、

sort-js-object-keys/lib/sort-js-object-core.js

Line 133 in d209e2c

ast = parse(code, {

这里可以用parseExpression，根据官方说明，性能会好一点。

2、另外，希望添加一个自动排序文件中所有的object功能，根据babel转换的AST的节点类型很容易判断是不是Object。

3、还有个小建议，在演示的动图里，可以加上一个操作演示，“单击起点，按住shift + 单击终点”即可选择所需要的对象，比演示的操作要方便、快捷、准确。

Support for comments

Great plugin! Thanks for working on this.

I want to suggest inline comments support, right now the following will throw an error:

const foo = {
b : 2,
// some comment
a : 1,
}

Unable to sort object containing `import`

const x = {
  a: 1,
  b: import('foo')
}

Sort array

Hi, currently this extension only supports sorting keys, how about adding a setting for sorting array as well?
e.g.

{
  b: 'b',
  a: [3, 2, 1],
}

to

{
  a: [ 1, 2, 3],
  b: 'b'
}

Request: Sort Typescript types

Provide support to sort the following:

export interface Example {
  a: string;
  c: string;
  b: string;
}

JSS keys

Hi, I am using your great plugin to sort jss objects, which are just JS objects but with a few funny key names. This should be sortable:

{
    backgroundColor: 'transparent',
    color: GRAY_TEXT,
    fontSize: '0.8em',
    '&:hover': {
      color: SECONDARY,
    },
  }

But the plugin fails. If I remove the &:hover key then it's fine. If I can help fix this, please let me know

Feature Request: Allow trailing commas

It would be great if this package could add trailing commas to the sorted result. It's a rule I have on my workspace and having to add them manually can be a pain. (Though less of a pain that sorting manually!)

TypeScript support

Hello,
thx for the extension!

Trying to use it in typescript only leads to a warning.
Please make sure your selected text is a JS object!

Can it support TypeScript?
Thanks :)

Feature: Only sort first N levels

It would be useful if I could sort an object only at its first level, and not sort all the subkeys as well. And maybe some people would want to sort the first 2 levels, but not the next ones.

For example:

// Before sort
const countries = {
  CH: {
    name: 'Switzerland',
    description: 'Chocolate and watches',
  },
  BE: {
    name: 'Belgium',
    description: 'Beer and fries',
  },
};

// Output after sort, 1st level only
const countries = {
  BE: {
    name: 'Belgium',
    description: 'Beer and fries',
  },
  CH: {
    name: 'Switzerland',
    description: 'Chocolate and watches',
  },
};

In this case, I want the first level sorted, but not the second, because it makes more sense to keep the name key first for ease of reading.

Format with variable

It would be great if the selected text could contain the usual context of an object, for instance its declaration: being able to select the whole piece of code is way easier and quicker than precisely selecting the object in the script:

For the code

const style = {
    alignItems: 'center',
    justifyContent: 'space-evenly',
    display: 'flex',
    padding: '0 8px',
};

we have to select from { to }, my suggestion is to be able to select from const to ;

---

Maybe this is more niche but this situation also could be taken care of:

const styles = theme => ({
    img: {
        maxHeight: "100%",
        maxWidth: "-webkit-fill-available"
    },
    imgDiv: {
        alignItems: "center",
        display: "flex",
        height: "100px",
    }
});

fails with jsx

It fails with "Please make sure your selected text is a JS object!" for following object because of value of c

const pippo = {
  n: 'afd',
  a: 45,
  t: 'fdfsa',
  c: <div></div>,
  w: 'fdaf'
}

[Feature Request] Inline comments

This extension already supports comments like this

const foo = {
  // some comment
  b : 2,
  // another comment
  a : 1,
}

But it doesn't support inline comments like this

const foo = {
  b : 2,                                 // some comment
  a : 1,                                 // another comment
}

The second form is just as common as the first one. It would be nice if both were supported.

Pre-PR question

Hi. I want to make a small PR but I see there's no PR created (nor accepted) since 3 years ago. Is there any chance the PR would be accepted?