🎉

VSCode拡張機能と設定

2022/06/30に公開

VS Code

idea

以下の言語やライブラリのについてインストールしている拡張機能のまとめがき

Java
- Spring
- lombok
- thymleaf
Python
- Django
Javascript
- React.js
  - Next.js
- Typescript
HTML
CSS系
- TailwindCSS
- styled-components
その他便利な拡張機能

Java

開発に必要な拡張機能しか基本入れてません

Checkstyle for Java
Extension Pack for Java
Java Language Support
Maven for Java
Project Manager for Java
Test Runner for Java
Spring Boot Dashboard
Spring Boot Extension Pack
Spring Initializr Java Support
Lombok Annotations Support for VS Code
thymeleaf

Python

主にSnippetsやsyntax系

Python
Pylance
Python Indent
Jupyter
Djaneiro - Django Snippets
Django

Javascript

主にSnippetやImport系、Lint

Auto Import - ES6, TS, JSX, TSX
ES7+ React/Redux/React-Native snippets
Typescript React code snippets
ESLint
next.js
Next.js snippets

HTML

あったら便利系が多い
なくても問題ない

Auto Close Tag
勝手に閉じタグ生成
Auto Rename Tag
前タグ変えたら勝手に閉じタグも変わる
HTML CSS Support
スニペット
htmltagwrap
"Alt + W" ("Option + W" for Mac)で選択した範囲をタグで囲める

CSS系

styled-components-snippets
component指向のcss
vscode-styled-components
syntax
Tailwind CSS IntelliSense
流行りのやつ
tailwind-styled-snippets
snippets

その他便利な拡張機能

Better Comments
コメントに色つけれる
fish-vscode
fishファイルのsyntax
Git History
gitflow
GitLens — Git supercharged
Highlight Matching Tag
カーソルがあるタグの相手側も一緒にハイライトしてくれる
IntelliCode
コード補完
Japanese Language Pack for Visual Studio Code
日本語
Markdown All in One
マークダウン全部入り
Material Icon Theme
icon
設定によっちゃdjangoのiconもつけれる
MySQL
DBと紐づければVSCode内でSQL書けるし、見れる
One Dark Pro
好みのテーマ
Path Autocomplete
pathの補完してくれる
PowerShell
powershell使える
Prettier - Code formatter
有名なフォーマッター
Unibeautify - Universal Formatter
設定ファイル置いとけば結構融通のきくフォーマッター
zenkaku
全角をハイライト

最後にVSCodeの設定ファイル

unibeautify-vscodeが記述されているところは設定ファイルがなければ動きません
.unibeautifyrc.jsonファイルを作成し、コメントアウトしているところにパスを指定してください
以下参考程度にソース載せておきます

settings.json

{
  // 本体設定
  "editor.tabCompletion": "onlySnippets",
  "editor.renderWhitespace": "all",
  "editor.wordWrap": "wordWrapColumn",
  "editor.wordWrapColumn": 120,
  "editor.formatOnPaste": false,
  "explorer.confirmDelete": false,
  "editor.formatOnSave": true,
  "editor.suggestSelection": "first",
  "editor.minimap.enabled": false,
  "editor.quickSuggestionsDelay": 500,
  "editor.multiCursorModifier": "ctrlCmd",
  "editor.snippetSuggestions": "top",
  "editor.suggest.snippetsPreventQuickSuggestions": false,
  "editor.fontSize": 13,
  "explorer.confirmDragAndDrop": false,
  "diffEditor.wordWrap": "on",
  "files.insertFinalNewline": true,
  "files.trimFinalNewlines": true,
  "files.autoSave": "onFocusChange",
  "files.trimTrailingWhitespace": true,
  "scm.inputFontSize": 14,
  "workbench.startupEditor": "newUntitledFile",
  "javascript.implicitProjectConfig.experimentalDecorators": true,
  // フォーマッター
  // "unibeautify.defaultConfig": "/XXXXX/XXXXXXX/XXXXX/.unibeautifyrc.json",
  // アイコンテーマ
  "workbench.iconTheme": "material-icon-theme",
  // Django設定
  "[django-html]": {
    "editor.tabSize": 2,
    "editor.formatOnSave": true,
    "editor.defaultFormatter": "Glavin001.unibeautify-vscode"
  },
  "files.associations": {
    "templates/*.html": "django-html",
    "**/requirements{/**,*}.{txt,in}": "pip-requirements"
  },
  "vsintellicode.modify.editor.suggestSelection": "automaticallyOverrodeDefaultValue",
  "python.languageServer": "Default",
  "python.linting.pylintArgs": [
    "--load-plugins=pylint_django"
  ],
  // GIT
  "git.autofetch": true,
  "git.enableSmartCommit": true,
  // ファイル監視
  "files.watcherExclude": {
    "**/wp-content/**": true,
    "**/.git": true,
    "**/node_modules": true
  },
  // ターミナル
  "terminal.integrated.shell.osx": "/bin/zsh",
  "python.terminal.activateEnvironment": false,
  // VIM
  "vim.insertModeKeyBindings": [
    {
      "before": [
        "j",
        "j"
      ],
      "after": [
        "<Esc>"
      ]
    }
  ],
  "vim.hlsearch": true,
  // EMMET
  "emmet.excludeLanguages": [
    "markdown"
  ],
  "emmet.triggerExpansionOnTab": true,
  "emmet.includeLanguages": {
    "javascript": "javascriptreact",
    "django-html": "html"
  },
  "emmet.syntaxProfiles": {
    "jsx": {
      "self_closing_tag": true
    }
  },
  // Jupyter
  "workbench.editorAssociations": {
    "*.ipynb": "jupyter-notebook"
  },
  "javascript.preferences.quoteStyle": "single",
  "typescript.preferences.quoteStyle": "single",
  // 言語設定
  "[html]": {
    "editor.defaultFormatter": "Glavin001.unibeautify-vscode"
  },
  "[css]": {
    "editor.defaultFormatter": "Glavin001.unibeautify-vscode",
    "editor.tabSize": 2
  },
  "[scss]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.tabSize": 2
  },
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[javascriptreact]": {
    "editor.defaultFormatter": "Glavin001.unibeautify-vscode"
  },
  "[java]": {
    "editor.formatOnSave": true,
    "editor.defaultFormatter": "redhat.java"
  },
  "[python]": {
    "editor.defaultFormatter": "Glavin001.unibeautify-vscode"
  },
  "editor.cursorSmoothCaretAnimation": true,
  "notebook.cellToolbarLocation": {
    "default": "right",
    "jupyter-notebook": "left"
  },
  "security.workspace.trust.untrustedFiles": "open",
  "javascript.updateImportsOnFileMove.enabled": "always",
  "window.zoomLevel": 3,
  "workbench.colorTheme": "One Dark Pro",
  "files.exclude": {
    "**/.classpath": true,
    "**/.project": true,
    "**/.settings": true,
    "**/.factorypath": true
  },
  "prettier.printWidth": 120,
  "editor.unicodeHighlight.allowedCharacters": {},
  "vsicons.dontShowNewVersionMessage": true,
  // Java フォーマッター
  "java.jdt.ls.vmargs": "-XX:+UseParallelGC -XX:GCTimeRatio=4 -XX:AdaptiveSizePolicyWeight=90 -Dsun.zip.disableMemoryMapping=true -Xmx1G -Xms100m -javaagent:\"/Users/ryotarohomma/.vscode/extensions/gabrielbb.vscode-lombok-1.0.1/server/lombok.jar\"",
  "java.format.settings.url": "https://raw.githubusercontent.com/google/styleguide/gh-pages/eclipse-java-google-style.xml",
  "java.format.settings.profile": "GoogleStyle",
  "java.home": "/Library/Java/JavaVirtualMachines/jdk-15.0.1.jdk/Contents/Home",
  "java.debug.settings.hotCodeReplace": "auto",
  "editor.guides.bracketPairs": "active",
  "[jsonc]": {
    "editor.defaultFormatter": "vscode.json-language-features"
  }
}

.unibeautifyrc.json

{
  "HTML": {
    "indent_size": 2,
    "indent_char": " ",
    "wrap_line_length": 80,
    "wrap_prose": "always",
    "indent_inner_html": true,
    "force_indentation": false,
    "quotes": "double",
    "beautifiers": [
      "Pretty Diff",
      "JS-Beautify"
    ]
  },
  "css":{
    "indent_size": 2,
    "indent_char": " ",
    "wrap_line_length": 120,
    "wrap_prose": "always",
    "end_with_newline": true,
    "quotes": "double",
    "remove_trailing_whitespace": true,
    "no_leading_zero": true,
    "beautifiers": [
      "stylelint",
      "Prettier",
      "Pretty Diff"
    ]
  },
  "SCSS": {
    "indent_size": 2,
    "indent_char": " ",
    "remove_trailing_whitespace": true,
    "end_with_newline": true,
    "quotes": "single",
    "beautifiers": [
      "Prettier",
      "stylelint",
      "Pretty Diff"
    ]
  },
  "JavaScript":{
    "indent_size": 2,
    "indent_char": " ",
    "wrap_line_length": 120,
    "wrap_prose": "always",
    "end_with_newline": true,
    "jslint_happy": true,
    "quotes": "single",
    "remove_trailing_whitespace": true,
    "space_after_anon_function": true,
    "space_before_conditional": true,
    "end_with_semicolon":true,
    "space_in_paren": true,
    "beautifiers": [
      "Prettier"
    ]
  },
  "JSX":{
    "indent_size": 2,
    "indent_char": " ",
    "wrap_line_length": 120,
    "end_with_newline": true,
    "jslint_happy": true,
    "end_with_semicolon": true,
    "remove_trailing_whitespace": true,
    "space_after_anon_function": true,
    "space_before_conditional": false,
    "space_in_paren": true,
    "quotes": "single",
    "beautifiers": [
      "Prettier"
    ]
  },
  "TypeScript": {
    "indent_size": 2,
    "indent_char": " ",
    "quotes": "single",
    "end_with_comma": true,
    "beautifiers": [
      "Prettier"
    ]
  },
  "Python": {
    "indent_size": 4,
    "indent_char": " ",
    "indent_style": "space",
    "wrap_line_length": 120,
    "wrap_prose": "always",
    "beautifiers": [
      "Black",
      "YAPF"
    ]
  }
}