[VS Code] VS Code Plugins

最近從 Sublime 跳槽到 Visual Studio Code(VS Code)，雖然在開啟速度上，會明顯地感覺到比 Sublime 慢，但是 VS Code 有很多的 plugin 可以讓開發效率更好，雖然 Sublime 也有不少 plugin，但是有些很基本的功能還要另外安裝，有點麻煩(例如: SideBarEnhancements，這大概是裝完 Sublime 之後第一個裝的 plugin XD)，再加上常常在儲存檔案時出現提醒視窗也很煩，最後就決定跳槽到 VS Code，在這裡紀錄一下自己在開發時常用的 plugins.

Themes & Icon

Flatland Monokai Theme

• 更多主題: Themes

Material Icon Theme

File icon

Folder icon

Vscode Terminal Themes

Terminal Themes for Visual Studio Code.

• All theme preview: https://glitchbone.github.io/vscode-base16-term/#/

---

Linter

ESLint

Integrates ESLint into VS Code.

• 常見的規則有Airbnb、Google

stylelint

Linter for CSS, SCSS, Less.

markdownlint

Linter for Markdown.

cornflakes-linter

Wrapper for Python flake8 linter and associated plugins.

---

Formatter

Prettier - Code formatter

Prettier is an opinionated code formatter. It enforces a consistent style by parsing your code and re-printing it with its own rules that take the maximum line length into account, wrapping code when necessary.

• JavaScript, TypeScript, Flow, JSX, JSON
• CSS, SCSS, Less
• HTML, Vue, Angular HANDLEBARS, Ember, Glimmer
• GraphQL, Markdown, YAML

Prettier ESLint

A Visual Studio Extension to format JavaScript and Typescript code using prettier-eslint package.

---

Snippets

JavaScript (ES6) code snippets

This extension contains code snippets for JavaScript in ES6 syntax for Vs Code editor (supports both JavaScript and TypeScript).

jQuery Code Snippets

Over 130 jQuery Code Snippets for JavaScript code.

Vue 3 Snippets

This extension adds Vue 2 Snippets and Vue 3 Snippets into Visual Studio Code.

ES7+ React/Redux/React-Native snippets

JavaScript and React/Redux snippets in ES7+ with Babel plugin features for VS Code.

Auto-completes

Auto Rename Tag

自動 rename 對應的 tag.

npm Intellisense

Autocompletes npm modules in import statements.

Path Intellisense

Autocompletes file path.

---

Markdown

Markdown All in One

All you need for Markdown (keyboard shortcuts, table of contents, auto preview and more).

Markdown Preview Enhanced

Preview markdown file, 且支援許多好用的功能，例如: 插入/上傳圖片、將 markdown file 轉為 PDF 等功能。

Markdown PDF

Convert Markdown to PDF.

---

Frontend

Vetur

Vue tooling for VS Code, powered by vue-language-server.

Vue Language Features (Volar)

Language support for Vue 3.

Easy LESS

在儲存時，自動將 Less 轉為 css.

Live Server

Launch a development local Server with live reload feature for static & dynamic pages.

Color Picker

調色盤，快速選取顏色:

• 快捷鍵: Ctrl+C P
• 如果無法顯示調色盤，須修改 VS code config (settings.json):

{
  "colorHelper.disableGpu": 1
}

---

Diagram

PlantUML

Rich PlantUML support for Visual Studio Code.

Draw.io Integration

在 VS code 中使用 draw.io.

ERD Editor

ERD Editor vscode extension.

Python

Python

Python 開發必裝套件, features:

• IntelliSense: Edit your code with auto-completion, code navigation, syntax checking and more
• Linting: Get additional code analysis with Pylint, Flake8 and more
• Code formatting: Format your code with black, autopep or yapf
• Debugging: Debug your Python scripts, web apps, remote or multi-threaded processes
• Testing: Run and debug tests through the Test Explorer with unittest or pytest.
• Jupyter Notebooks: Create and edit Jupyter Notebooks, add and run code cells, render plots, visualize variables through the variable explorer, visualize dataframes with the data viewer, and more
• Environments: Automatically activate and switch between virtualenv, venv, pipenv, conda and pyenv environments
• Refactoring: Restructure your Python code with variable extraction and method extraction. Additionally, there is componentized support to enable additional refactoring, such as import sorting, through extensions including isort and Ruff.

Pylance

Python 開發必裝套件，提供許多 Python 相關的實用功能，例如：靜態語法分析，詳細可參考套件頁面。

Jupyter

Jupyter notebook support, interactive programming and computing that supports Intellisense, debugging and more.

autoDocstring - Python Docstring Generator

自動產生 Python docstrings.

Go

Go

Rich Go language support for Visual Studio Code.

Java

Extension Pack for Java

Popular extensions for Java development that provides Java IntelliSense, debugging, testing, Maven/Gradle support, project management and more.

Infra

Terraform

Terraform configuration language support (includes Terragrunt).

HashiCorp Terraform

Syntax highlighting and autocompletion for Terraform.

Serverless IDE

Enhanced support for AWS SAM, CloudFormation and Serverless Framework.

Docker

Makes it easy to create, manage, and debug containerized applications.

Other useful plugins

Project Manager

Easily switch between projects.

Code Runner

Run code snippet or code file for multiple languages: C, C++, Java, JavaScript, PHP, Python, Perl, Perl 6, Ruby, Go, Lua, Groovy, PowerShell, BAT/CMD, BASH/SH, F# Script, F# (.NET Core), C# Script, C# (.NET Core), VBScript, TypeScript, CoffeeScript, Scala, Swift, Julia, Crystal, OCaml Script, R, AppleScript, Elixir, Visual Basic .NET, Clojure, Haxe, Objective-C, Rust, Racket, Scheme, AutoHotkey, AutoIt, Kotlin, Dart, Free Pascal, Haskell, Nim, D, Lisp, Kit, V, SCSS, Sass, CUDA, Less, Fortran, Ring, Standard ML, Zig, and custom command.

Code Spell Checker

自動檢查拼字是否錯誤。

Dash

方便快速查找 API 資料。

DotENV

Support for dotenv file syntax.

Debugger for chrome

Debug JavaScript code in Chrome browser.

.ejs

支援 EJS.

Git History(git log)

查看 Git history, git log.

GitHub Copilot

Your AI pair programmer.

GitLens

GitLens supercharges Git inside VS Code and unlocks untapped knowledge within each repository. It helps you to visualize code authorship at a glance via Git blame annotations and CodeLens, seamlessly navigate and explore Git repositories, gain valuable insights via rich visualizations and powerful comparison commands, and so much more.

open in browser

在 browser 中開啟目前的檔案:

• Alt+B: Open in default browser
• Alt+Shift+B: Open in browser

Regex Previewer

Preview Regex 比對結果。

REST Client

REST Client for Visual Studio Code.

SFTP

SFTP/FTP 同步。

Swagger Viewer

方便直接瀏覽 Swagger API 文件。

vscode-hexo

若有使用 Hexo 這個 blog framework, 推薦安裝此套件，讓 VSCode 支援 hexo 相關指令(init, new, generate, server, deploy, publish, clean commands).

VSCode Reveal

使用 VS Code 做 slides.

YAML

YAML Language Support by Red Hat, with built-in Kubernetes syntax support.

---

Config

除了上面的 plugins 之外，在這裡順便紀錄一下自己常用的 config:

// settings.json
{
    "workbench.iconTheme": "material-icon-theme",
    "files.defaultLanguage": "python",
    "workbench.colorTheme": "Monokai",
    "editor.fontLigatures": null,
    "[markdown]": {
        "editor.wordWrap": "on",
        "editor.quickSuggestions": {
            "comments": "on",
            "strings": "on",
            "other": "on"
        },
        "editor.defaultFormatter": "DavidAnson.vscode-markdownlint"
    },
    "markdown.preview.fontSize": 16,
    "markdown.preview.lineHeight": 1.8,
    "files.exclude": {
        "**.m4a": true,
        "**.mp3": true,
        "**.mp4": true,
        "**.wav": true,
        "**/__pycache__": true,
        "**/.DS_Store": true,
        "**/.git": true,
        "**/.hg": true,
        "**/.pytest_cache": true,
        "**/.svn": true,
        "**/build": true,
        "**/CVS": true,
        "**/data": true,
        "**/env": true,
        "**/node_modules": true
    },
    "files.eol": "\n",
    "editor.fontFamily": "'Source Code Pro', Consolas, '微軟正黑體', 'Courier New', monospace, 'SauceCodePro Nerd Font'",
    "emmet.includeLanguages": {
        "ejs": "html"
    },
    //"editor.formatOnSave": true,
    "editor.codeActionsOnSave": {
        "source.fixAll.eslint": true
    },
    "[html]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "editor.fontSize": 16,
    "projectManager.git.baseFolders": [
        "/Users/user/Documents/workspace"
    ],
    "projectManager.any.baseFolders": [
        "/Users/user/Documents/workspace"
    ],
    "projectManager.any.ignoredFolders": [
        "node_modules",
        "out",
        "output",
        "typings",
        "test",
        "__pycache__",
        ".git",
        ".pytest_cache",
        ".vscode",
        ".idea"
    ],
    "projectManager.any.maxDepthRecursion": 1,
    "search.exclude": {
        "**/__pycache__": true,
        "**/.pytest_cache": true
    },
    "workbench.editorAssociations": {
        "*.ipynb": "jupyter-notebook"
    },
    "python.linting.flake8Enabled": true,
    "python.formatting.provider": "black",
    "eslint.format.enable": true,
    "eslint.rules.customizations": [],
    "[javascript]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "prettier.singleQuote": true,
    "prettier.useTabs": false,
    "prettier.semi": true,
    "prettier.trailingComma": "es5",
    "prettier.arrowParens": "always",
    "prettier.jsxSingleQuote": true,
    "prettier.printWidth": 200,
    "python.envFile": "${workspaceFolder}/config/.env",
    "python.linting.pylintEnabled": true,
    "python.defaultInterpreterPath": "/opt/homebrew/opt/python@3.10/bin/python3",
    "notebook.cellToolbarLocation": {
        "default": "right",
        "jupyter-notebook": "left"
    },
    "diffEditor.ignoreTrimWhitespace": false,
    "[json]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "terminal.integrated.fontSize": 16,
    "files.associations": {
        ".env.prod": "dotenv"
    },
    "python.formatting.blackArgs": [
        "--skip-string-normalization",
        "--line-length=100"
    ],
    "git.confirmSync": false,
    "python.linting.pycodestyleEnabled": true,
    "python.linting.pydocstyleEnabled": true,
    "python.formatting.autopep8Args": [
        "--max-line-length=100"
    ],
    "python.linting.flake8Args": [
        "--max-line-length=100"
    ],
    "python.linting.pycodestyleArgs": [
        "--max-line-length=100"
    ],
    "workbench.colorCustomizations": {
        "terminal.background": "#0903008f",
        "terminal.foreground": "#A5A2A2",
        "terminalCursor.background": "#A5A2A2",
        "terminalCursor.foreground": "#A5A2A2",
        "terminal.ansiBlack": "#090300",
        "terminal.ansiBlue": "#01a0e4",
        "terminal.ansiBrightBlack": "#5C5855",
        "terminal.ansiBrightBlue": "#01A0E4",
        "terminal.ansiBrightCyan": "#B5E4F4",
        "terminal.ansiBrightGreen": "#01A252",
        "terminal.ansiBrightMagenta": "#A16A94",
        "terminal.ansiBrightRed": "#DB2D20",
        "terminal.ansiBrightWhite": "#F7F7F7",
        "terminal.ansiBrightYellow": "#FDED02",
        "terminal.ansiCyan": "#B5E4F4",
        "terminal.ansiGreen": "#01A252",
        "terminal.ansiMagenta": "#A16A94",
        "terminal.ansiRed": "#DB2D20",
        "terminal.ansiWhite": "#A5A2A2",
        "terminal.ansiYellow": "#FDED02"
    },
    "yaml.customTags": [
        "!And",
        "!And sequence",
        "!If",
        "!If sequence",
        "!Not",
        "!Not sequence",
        "!Equals",
        "!Equals sequence",
        "!Or",
        "!Or sequence",
        "!FindInMap",
        "!FindInMap sequence",
        "!Base64",
        "!Join",
        "!Join sequence",
        "!Cidr",
        "!Ref",
        "!Sub",
        "!Sub sequence",
        "!GetAtt",
        "!GetAZs",
        "!ImportValue",
        "!ImportValue sequence",
        "!Select",
        "!Select sequence",
        "!Split",
        "!Split sequence"
    ],
    "go.buildTags": "testtools",
    "go.testTags": "testtools",
    "go.testEnvVars": {
        "GOOS": ""
    },
    "html.autoClosingTags": false,
    "editor.lineNumbers": "on",
    "aws.profile": "profile:n1-int",
    "editor.inlineSuggest.enabled": true,
    "[python]": {
        "editor.formatOnType": true
    },
    "github.copilot.advanced": {},
    "github.copilot.enable": {
        "*": true,
        "yaml": false,
        "plaintext": false,
        "markdown": false,
        "scminput": false
    },
    "[yaml]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    // "go.gopath": "/Users/user/go",
    // "prettier.configPath": "/Users/user/workspace/.vscode/.prettierrc"
}