AdiPol Dev

My VSCode Setup

Miniaturka posta My VSCode Setup

I have been using Visual Studio Code for a long time now. I have tried many different plugins and settings, but finally found the perfect configuration for me. Here is a list of the plugins and settings I use.

Files

JSON Settings

settings.json
{
  "window.commandCenter": true,
  "workbench.iconTheme": "catppuccin-mocha",
  "workbench.list.smoothScrolling": true,
  "editor.cursorBlinking": "expand",
  "editor.cursorSmoothCaretAnimation": "on",
  "editor.fontFamily": "'Fira Code', Consolas, 'Courier New', monospace",
  "editor.tabSize": 2,
  "editor.fontSize": 14,
  "editor.smoothScrolling": true,
  "editor.formatOnSave": true,
  "editor.minimap.enabled": false,
  "terminal.integrated.lineHeight": 1.5,
  "explorer.compactFolders": false,
  "errorLens.excludeBySource": ["eslint(prettier/prettier)"],
  "prettier.singleQuote": true,
  "prettier.useTabs": false,
  "editor.unicodeHighlight.ambiguousCharacters": false,
  "editor.codeActionsOnSave": {
    "source.fixAll": "explicit"
  },
  "[prisma]": {
    "editor.defaultFormatter": "Prisma.prisma"
  },
  "files.associations": {
    "*.css": "tailwindcss"
  },
  "javascript.updateImportsOnFileMove.enabled": "always",
  "typescript.updateImportsOnFileMove.enabled": "always",
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.fontLigatures": true,
  "editor.letterSpacing": 0.7,
  "editor.lineHeight": 32,
  "editor.guides.bracketPairs": true,
  "workbench.tree.indent": 20,
  "workbench.tree.renderIndentGuides": "always",
  "workbench.colorCustomizations": {
    "tree.indentGuidesStroke": "#505050"
  },
  "prisma.showPrismaDataPlatformNotification": false,
  "workbench.sideBar.location": "right",
  "editor.linkedEditing": true,
  "window.autoDetectColorScheme": true,
  "workbench.preferredLightColorTheme": "Default Light Modern",
  "vscord.app.name": "Visual Studio Code",
  "vscord.status.idle.enabled": false,
  "vscord.status.idle.check": false,
  "i18n-ally.ignoredLocales": [],
  "workbench.editor.customLabels.patterns": {
    "**/app/**/page.tsx": "${dirname} - Page",
    "**/app/**/layout.tsx": "${dirname} - Layout"
  },
  "vscord.app.privacyMode.enable": true,
  "update.mode": "manual",
  "workbench.navigationControl.enabled": false,
  "terminal.integrated.gpuAcceleration": "off",
  "workbench.statusBar.visible": false,
  "workbench.activityBar.location": "top",
  "friendly-ui.disableWorkbenchJs": true,
  "friendly-ui.customCssPath": "/Users/adrian/Documents/vscode/friendly-ui.css",
  "friendly-ui.customJsPath": "/Users/adrian/Documents/vscode/friendly-ui.js",
  "workbench.preferredDarkColorTheme": "Night Wolf (black)"
}

Friendly UI

friendly-ui.css
.monaco-tl-contents > * {
  height: 100% !important;
  display: flex;
  align-items: center;
}

.quick-input-list-label {
  height: auto !important;
}
friendly-ui.js
const COMMAND_PANNEL_HEIGHT = 35;
const ITEM_HEIGHT = 35;

const loadJsFile = async (path, callback, isImport) => {
  const resp = await fetch(
    (path.startsWith('./') ? path : '../../../../' + path) + '.js'
  );
  const respText = await resp.text();
  const newText = callback ? await callback(respText) : respText;
  const blob = new Blob([newText], { type: 'application/javascript' });
  const url = URL.createObjectURL(blob);

  return isImport ? await import(url) : url;
};

const replaceCommandPannelHeight = (text) => {
  text = text.replace(
    /(44:)22(?=})/g,
    (_, prefix) => `${prefix}${COMMAND_PANNEL_HEIGHT}`
  );

  return text;
};

const replaceItemHeight = (text) => {
  const replaceItemH = (_, prefix) => `${prefix}${ITEM_HEIGHT}`;

  text = text.replace(/(eight\([^)]*?\)\{return )22(?!\d)/g, replaceItemH);
  text = text.replace(/(ITEM_HEIGHT=)22(?!\d)/g, replaceItemH);
  text = text.replace(/(\*)22(?!\d)/g, replaceItemH);
  text = text.replace(/(:)22(?=})/g, replaceItemH);

  return text;
};

(async function () {
  const mainJsPath = 'vs/workbench/workbench.desktop.main';

  await loadJsFile(
    './workbench',
    async (text) => {
      const mainJsUrl = await loadJsFile(mainJsPath, (text) => {
        text = replaceCommandPannelHeight(text);
        text = replaceItemHeight(text);
        return text;
      });

      return text.replace(mainJsPath, mainJsUrl + '#');
    },
    true
  );
})();

List of plugins

Final result

Final result

👉🏻 Zauważyłeś/aś błąd? 👈🏻

Edytuj ten post na GitHubie!