How can I disable auto-remove line space in vscode?

Question

I'm using vs code editor while coding,

I have javaScript files and I want to disable auto-remove lines in top "Import packages/files" after saving file vsCode formatting it like this

for example, here's the default setting.

import {createBottomTabNavigator} from '@react-navigation/bottom-tabs';
import React from 'react';
import HomeScreen from '../screens/HomeScreen'; // it's just stuck here i want to add line between packages and my own components/files

what i expected "one line"

import {createBottomTabNavigator} from '@react-navigation/bottom-tabs';
import React from 'react';

import HomeScreen from '../screens/HomeScreen'; 

Here's my vsCode setting.json

{
  "window.zoomLevel": 1,
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "editor.formatOnSave": true,
  "files.autoSave": "afterDelay",
  "editor.codeActionsOnSave": {
    "source.organizeImports": true
  },
  "files.autoSaveDelay": 100000,
  "git.enableSmartCommit": true,
  "git.autofetch": true,
  "javascript.updateImportsOnFileMove.enabled": "always",
  "diffEditor.ignoreTrimWhitespace": true,
  // "vscode_custom_css.imports": [
  //     "file:///Users/anas/Documents/synthwave84.css"
  // ],
  "vscode_custom_css.imports": [
    "file:///Users/anas/.vscode/extensions/webrender.synthwave-x-fluoromachine-0.0.9/MyOwnCssThemes.css"
  ],
  "vscode_custom_css.policy": true,
  // "editor.fontFamily": "Operator Mono, Menlo, Monaco, 'Courier New', monospace",
  // "editor.fontFamily": "Hack Nerd Font",
  // "editor.fontFamily": "Fira Code",
  "editor.fontFamily": "JetBrains Mono",
  "editor.fontLigatures": true,
  "editor.fontSize": 16,
  "editor.lineHeight": 25,
  "editor.letterSpacing": 0.5,
  "files.trimTrailingWhitespace": true,
  "editor.fontWeight": "200",
  "editor.cursorStyle": "line",
  "editor.cursorWidth": 3,
  "editor.cursorBlinking": "solid",
  "editor.renderWhitespace": "all",
  "editor.multiCursorModifier": "ctrlCmd",
  "workbench.iconTheme": "vscode-icons",
  "explorer.confirmDelete": false,
  "workbench.sideBar.location": "left",
  "sync.gist": "0bb71633d5c9e82031d21eb9d25f6dd2",
  "workbench.colorTheme": "1984 - Unbolded",
  "terminal.integrated.rendererType": "canvas",
  "terminal.integrated.shell.osx": "/bin/zsh",
  "terminal.integrated.fontFamily": "Hack Nerd Font",
  "editor.suggestSelection": "first",
  "vsintellicode.modify.editor.suggestSelection": "automaticallyOverrodeDefaultValue",
  "files.exclude": {
    "**/.classpath": true,
    "**/.project": true,
    "**/.settings": true,
    "**/.factorypath": true
  },
  "workbench.colorCustomizations": {
    "[Night Owl]": {
      "activityBar.background": "#000C1D",
      "activityBar.border": "#102a44",
      "sideBar.background": "#001122",
      "sideBar.border": "#102a44",
      "sideBar.foreground": "#8BADC1"
    },
    "[Night Owl No Italics]": {
      "activityBar.background": "#000C1D",
      "activityBar.border": "#102a44",
      "sideBar.background": "#001122",
      "sideBar.border": "#102a44",
      "sideBar.foreground": "#8BADC1"
    }
  },
  "workbench.startupEditor": "newUntitledFile",
  "breadcrumbs.enabled": true,
  "editor.minimap.enabled": false,
  "workbench.statusBar.visible": true,
  "gitlens.views.repositories.files.layout": "tree",
  "files.insertFinalNewline": true,
}

So how can i solve this issue?

Answer 1

Perhaps it's these working together?

"editor.formatOnSave": true,
"editor.codeActionsOnSave": {
  "source.organizeImports": true
}

I'm using eslint-plugin-import with the import-order rule to achieve the sort of thing you're trying to do. Here's the relevant part of my eslint config:

rules: {
  'import/no-unresolved': 'error',
  'import/order': ['error', {
    groups: [
      "builtin",
      "external",
      "internal",
      "parent",
      "sibling",
      "index"
    ],
    'newlines-between': 'always'
  }],
}