Visual Studio Code

2022/07/27 (增加連結)

介紹

• 10 Essential Tips and Tricks Every Developer Should Master in Visual Studio Code ** 基本用法

  • Command Palette

  • Quick Open

  • Command Line

  • Go to Definition

  • Edit Multiple Lines Simultaneously

  • Copy Line Up / Down

  • Side By Side Editing

  • Comment Code Block

  • Zen Mode

  • Git Integration

• Tricks, Tools and Tips for Faster Programming in Visual Studio Code

• Minimal VSCode Setup for Maximized Productivity (Part 1)

• Minimal VSCode Setup for Maximized Productivity (Part 2) : with Customize UI

• An overview of Visual Studio Code for front-end developers

  • show a brief introduction to VSCode

  • introduce the particular theme I’ve installed

  • discuss helpful extensions I use

    • Beautify

    • Bracket Pair Colorizer

    • ESLint

    • HTML Snippets

    • JavaScript (ES6) code snippets

    • Live Server

    • Markdown Preview Enhanced

    • Material Icon Theme

    • Prettier

  • show you how I leverage VSCode’s features to enhance my workflow.

    • Integrated Terminals

    • Source Control (Git)

• Visual Studio Code Can Do That?

  • Prettier

  • Git Integration

  • Zero Configuration Node.js Run And Debug

• Pro tips for Visual Studio Code to be productive in 2018

  • Git and Gitlens

  • Live Share

  • JSON to Code

  • Rename All Occurrences

  • Go to Definition

  • Edit Multiple Lines at Once

  • Debugger

  • Keybindings and the Command Pallette

  • Custom Keybindings

• Build Java Web Apps with VS Code (Spring Boot)

  • Build Spring Boot Apps with VS Code

• Take Your VS Code Configuration Anywhere Easily with Settings Sync

• Top 10 Advanced VS Code Settings for Senior Developers

• This Visual Studio Code Shortcut Changed My Life: Create multiple cursors quickly, without clicking

  • VSCode provides several mechanisms for placing cursors, but this is the one I use the most: Ctrl + D (Cmd + D on Mac).

• 12 VS Code Shortcuts and Tactics to Ease Development (Windows & Mac)

• 20 VS Code Shortcuts for Faster Coding (for MacOS, Ubuntu and Windows)

• 17 Useful Visual Studio Code Shortcuts to Boost Your Coding Speed (for Mac OS)

• 15 Useful VS Code Shortcuts to Boost Your Productivity (Windows & Mac)

• How to Configure VS Code Like a Pro

  • How to set up a workspace.

  • How to set up a multi-folder workspace.

  • Expose and share extensions via your workspace (really useful for teams).

  • How to set up and run automated tasks within a workspace/multi-folder workspace.

  • How to create custom snippets within a workspace.

• 10 Things To Boost Your Workflow in Visual Studio Code

  • Snippets

  • IntelliSense

  • Integrated Terminal

  • Peeking, References, and Update Symbol

  • Code Formatters and Tech Debt Trackers

  • Key Bindings

  • Zen Mode

  • Git

  • Debugger

  • Live Share

• Make VS Code Even Better With These Settings and Tools

  • Auto Save

  • Cursor Settings

  • Language-Specific Settings

  • Preferred Font

  • Small Personal Touches

• A few Settings to Boost Productivity in Visual Studio Code

• 6 VS Code Tips Will Improve Your Productivity

  • Multi-line and Multi-cursor Editing

  • Exclude Redundant Files And Folders

  • prop and ctor snippets

  • Make Your Life Easier When You Deal With Brackets

  • Add Icons To Make The Project Layout Informative

  • Postfix Completion

• 7 VS Code Tricks Every Developer Needs To Know

• 9 VS Code Practices To Speed Up Your Development

• Get the most out of your Visual Studio Code with these gem features

• New Features to Try Out on Vs Code

  • Changing case in regex replace

  • Hex Editor (extension)

  • Workbench Features

  • Search Editor

  • Timeline view

  • Git: Overflow menu cleanup

• VS Code Just Got a Big Update!

• Use VSCode Like a Senior Developer

  • Multiple Cursors

  • Rename Symbol

  • Move line up and down

  • User Snippets

• VSCode Automations for Frontend Developers

• 7 VS Code Tricks I Learned From My Colleagues

• How To Refactor Code in Visual Studio Code

• My VS Code setup for 2022

• Two keyboard shortcuts in VSCode that will drastically improve your productivity

  • The Go Back / Go Forward shortcuts

Extensions

• 9 VS Code Extensions You Need To Avoid **

  • 不是不好用，而是已經成為內建功能了!

  • Auto Close Tag

  • Auto Rename Tag (但目前還有些限制)

  • Bracket Pair Colorizer

  • Settings Sync

  • Path Intellisense

  • NPM

  • Auto Import

  • HTML Snippets (Emmet support)

  • Lorem Ipsum (Emmet support)

• Here are some super secret VS Code hacks to boost your productivity

  • Making it beautiful and friendly

    • Material Theme & Icons

    • Zen Mode with Centered Layout

    • Fonts With Ligatures

    • Rainbow Indent

    • Title Bar Customization

  • Faster Coding

    • Tag Wrapping

    • Balance Inwards and Outwards

    • Turbo Console.log()

    • Live server

    • Copy/Paste with Multiple Cursors

    • Breadcrumbs and Outlines

  • Miscellaneous

    • Code CLI

    • Polacode

    • Quokka (JS/TS ScratchPad)

    • WakaTime

    • VSCode Hacker Typer

    • Exclude folders

• 10 Visual Studio Code Extensions that Help You Get Rid of Technical Debt

  • Refactoring and tech debt tools

  • TODOs and comments

  • Automation

• VS Code extensions that make me fall in love with programming each day

  • VS Code extensions for better productivity

    • WakaTime

    • Visual Studio IntelliCode

    • Terminal Here

    • Live Server

    • ReactJS Code Snippets

    • Python

    • Path Intellisense

    • NPM Intellisense

    • Markdownlint

    • Markdown Preview Enhanced

    • Auto Close Tag

    • Auto Rename Tag

  • VS Code extensions for better style

    • Prettier — Code Formatter

    • Rainbow Brackets

    • Snazzy Operator

    • vscode-styled-components

• 10 Useful Plugins for Visual Studio Code

  • Simple, Easy-to-Use Plugins

    • Auto Rename Tag

    • Bracket Pair Colorizer 2

    • Indent-Rainbow

    • Code Spell Checker

    • Sort JS object keys

  • The Heavy Weights

    • ESLint

    • Jest

    • GitLens

  • Built-In Extensions

    • Git

    • Markdown Language Features

• Helpful Visual Studio Code extensions **

  • Extension Packs

  • Programming Languages

  • Snippets

  • Debuggers

  • Linters & Formatters

  • Other

  • Themes

• 7 Promising VS Code Extensions Introduced in 2021

• 6 Visual Studio Code Extensions I Cannot Live Without

  • Prettier

  • Bracket Pair Colorizer 2

  • Better Comments

  • Material Icon Theme

  • Indent rainbow

  • Toggle Zen mode

• 8 VS Code Extensions I Use Daily

  • Bracket Pair Colorizer 2

  • NPM Intellisense

  • Path Intellisense

  • Quokka.js

  • Docker

  • Live Server

  • Auto Close Tag and Auto Rename Tag

  • Markdown Preview Enhanced

• 10 VSCode Extensions That Will Help You Boost Your Productivity

• Here Are 10 Useful Visual Studio Code Extensions

• 15 VSCode extensions every Web Developer must have in 2021

• 10 Insider VS Code Extensions for Web Developers in 2020

  • Git Graph

  • Rest-Client

    • VS Code’s REST Client Plugin is All You Need to Make API Calls

  • Auto Close Tag

  • Peacock

  • TabNine

  • Polacode

  • TODO Highlight

  • Quokka.js

  • Bracket Pair Colorizer 2

  • Shades of Purple

• 15 VS Code Extensions to Save Your Time and Make You a Better Developer: A list of useful VS Code extensions for frontend developers

  • Live Server

  • Quokka.js

  • Code Spell Checker

  • GitLens

  • Prettier (Code Formatter)

  • ESLint

  • vscode-icons

  • Live Saas Compiler

  • JavaScript (ES6) code snippets

  • Browser Preview

  • Path Intellisense

  • Bracket Pair Colorizer

  • Vim

  • TODO Highlight

  • Color Highlight

• 10 Visual Studio Code Extensions for Frontend Developers in 2020

  • JavaScript Code Snippets

  • NPM

  • Prettier

  • CSS Peek

  • Vetur

  • ESLint

  • Live Sass Compiler

  • Debugger for Chrome

  • Live Server

  • Beautify

• These tools will help you write clean code (VS Code)

  • Prettier

  • ESLint

  • Automate Format and Lint on Save

  • Husky

  • Lint-staged

  • With Husky and Lint-staged Combined

  • EditorConfig

• 10 Extremely Helpful Visual Studio Code Plugins for Programmers

  • Visual Studio Intellicode

  • Git Blame

  • Prettier

  • JavaScript (ES6) Code Snippets

  • Sass

  • Path Intellisense

  • Debugger for Chrome

  • ESLint

  • SVG Viewer

  • Themes

    • 8 Awesome Themes for Visual Studio Code

• 8 Useful VSCode Add-Ons New Front-end Developers Should Absolutely Download

  • Atom Keymap

  • Auto Rename Tag

  • Bracket Pair Colorizer

  • IntelliSense for Class Names

  • Live Server

  • Material Theme

  • Prettier Code Formatter

  • Simple Icons

• 10 Top Visual Code Extensions in 2020

• Top VS Code extensions for Web Developers

  • ESLint

  • Visual Studio IntelliCode

  • TypeScript Hero

  • GitLens — Git supercharged

  • Prettier

  • ES7 React/Redux/GraphQL/React-Native snippets

  • IntelliSense for CSS class names in HTML

  • Bracket Pair Colorizer 2

  • Solarized+

• Top 10 VSCode Extensions as a Web Developer

• Tech Debt Tracker: A VS Code Extension to Help You Prototype Faster

• Immensely Upgrade Your Development Environment With These Visual Studio Code Extensions

• 21 VSCode Shortcuts to Make Coding Faster and More Fun

• The 25 Best VS Code Extensions

• VS Code Extensions For Web Dev Productivity

  • Making Code Easily Readable and Maintainable

  • General Operations

  • Debugging

  • Version Control

  • Markdown

  • Measuring Productivity

  • Other

• My 7 Favorite VS Code Extensions (That Aren’t Mentioned Yet)

  • Gitignore

  • Highlight Matching Tag

  • Image Preview

  • Indented Block Highlighting

    • The Best VS Code Extension You Haven’t Heard Of

  • Quokka

  • Reload

  • TabOut

• 5 VS Code Extensions That’ll Change Your Dev Life

  • SCSS IntelliSense

  • Auto Rename Tag

  • Duplicate Action

  • CodeStream

  • Night Owl

• 5 More VS Code Extensions That’ll Change Your Dev Life

  • Color Highlight

  • SVG Preview

  • i18n Ally

  • Code Spell Checker

  • JavaScript Booster

• 8 Practical VS Code Extensions That You Might Not Know About

  • Bracket Pair Colorizer

  • Auto Close Tag

  • Auto Rename Tag

  • Import Cost

  • Settings Sync

  • Touch Bar Display Commands

  • Vscode-styled-components

  • Live Share

• 8 VS Code Extensions to help you write better code

  • Bracket Pair Colorizer

  • Beautify

  • Code Spell Checker

  • TypeLens

  • Material Icon Theme

  • npm Intellisense

  • GitLens

  • Code::Stats

• 6 Uncommon Visual Studio Extensions for Greater Productivity

• 10 VS Code Extensions for Web Developers

• 7 VS Code Extensions That Make You Want To Keep Coding Forever

  • REST Client

  • CSS Peek

  • Beautify

  • Auto Rename Tag

    • 文後的回應說這個功能已經整合進最新版的vs code了

  • Quokka.js

  • Night Owl

  • JavaScript (ES6) code snippets

• VSCode Extensions You Need To Start Using Right Now

• 8 VS Code Extensions You Might Love

  • Better Comments

  • Bracket Pair Colorizer 2

  • CodeSnap

  • Github Markdown Preview

  • Markdown All in One

  • Paste JSON as Code

  • Random Everything

  • Settings Sync

• Code Pretty in These Themes for Visual Studio Code

  • Plastic

  • Palenight

  • Atom One

  • Shades of Purple

  • Nord

  • Noctis

  • Dracula Official

  • Panda

  • Material Theme

  • Lukin Theme for VS Code

• Most Useful VS Code Extensions To Improve Your Productivity

• 8 VSCode Extensions Every Developer Must Have

• 15 Useful VS Code Extensions for a Better Workflow

• 10 Fun VS Code Extensions To Enjoy Coding As a Developer

  • Debug Visualiser

• 25 VS Code extensions for (React ) frontend developers

• 10 VS Code Extensions to Fight Technical Debt

• My VSCode Setup & Plugins I Can't Code Without

• 10 Really Useful VSCode Extensions for Frontend Developers in 2022

• Why vscode.dev is a game changer for code reviews

Prettier

• Code Formatting with Prettier in Visual Studio Code

• Prettier — The Formatting Big Brother of ESLint

Lint

• Java

  • Checkstyle extension for Visual Studio Code (for Java)

• JavaScript

  • VS Code ESLint extension (Lint for JavaScript)

  • Integrating Prettier and ESLint With VS Code

• TypeScript

  • VS Code TSLint (Lint for TypeScript)

• Python

  • Linting Python in VS Code (Lint for Python)

CSS

• CSS, SCSS and Less

• 6 Awesome CSS Extensions for VS Code

  • HTML CSS Support

  • Intellisense for CSS Class Names

  • Autoprefixer

  • CSS Peek

    • CSS Peek

  • Prettier - Code Formatter

  • Bootstrap 4, Font awesome 4, Font Awesome 5 Free & Pro snippets

Debug

• Improve Your Debugging experience in Visual Studio Code (Node.js)

Git

• 使用VS Code的Git功能 (2016)

  • 在GitHub上建立儲存庫(Repository)

    • 在GitHub建立Repository

    • Clone GitHub的Repository到本機端

    • 使用VS Code開啟該目錄

  • 使用VS Code執行基本的操作

    • 檔案狀態

      • Untracked->Unstaged->Staged->Unstaged-Staged

    • Commit

    • Branch

    • 與遠端Repository互動

      • Push 、 Pull 、Sync(Push & Pull)

• VSCode中使用Git (2019, 更詳細)

Javascript

• 25 VS Code Extensions to Create a Top-Notch IDE for JavaScript **

  • JavaScript IDE Extension Pack

• VS Code Extensions for Happier JavaScript Coding

  • The Must-Haves

    • ESLint

    • GitLens

    • TODO Highlight

    • Import Cost

  • The Nice-to-Haves

    • Prettier - Code formatter

    • open in browser

    • vscode-styled-components

    • VSCode Great Icons

    • Bookmarks

    • One Monokai Theme

• 7 Essential Features of Visual Studio Code for Web Developers

  • Emmet Abbreviations

    • How much time can you save with HTML shortcuts

  • The Integrated CLI (Command Line Interface)

  • ESLint

  • Prettier

  • Multi-Cursor Shortcuts

  • Text Wrap

  • Execute and Debug JavaScript

• 7 VS Code Extensions that will make your life significantly easier

• VS Code ESLint extension (Lint for JavaScript)

• 26 Miraculous VSCode Tools for JavaScript Developers in 2019

• Debugging

  • Setting up JavaScript Debugging in Visual Studio Code

  • Basic Debugging in Visual Studio Code

  • How to Use VS Code to Debug Unit Test Cases (for react)

    • Debug the Original Create React App Unit Test Cases

    • Debug the Rewired Create React App Unit Test Cases

    • Debug the Ejected Create React App Unit Test Cases

    • Debug Options for Unit Test Cases

React

• Using React in VS Code

• React Extension Pack

  • Reactjs code snippets - Adds code snippets for React development in ES6

  • ES Lint - Integrates ESLint into VS Code.

    • Config Eslint and Prettier in Visual Studio Code for React js development

  • npm - Run npm scripts from the command palatte and validate the installed modules defined in package.json.

  • JavaScript (ES6) Snippets - Adds code snippets for JavaScript development in ES6 syntax.

  • Search node_modules - Quickly search for node modules in your project.

  • NPM IntelliSense - Adds IntelliSense for npm modules in your code.

  • Path IntelliSense - Autocompletes filenames in your code.

• Recommended VSCode extensions for React

• The Ultimate VSCode Setup for Front End/JS/React

• 10 VSCode Practices to Speed Up Your React Development Flow

  • Extension: User Snippets

  • Extension: Prettier

  • Extension + Package: TypeScript + ESLint

  • Shortcut: Duplicate Line Up/Down

  • Shortcut: Find All Occurrences in the Current File

  • Shortcut: Find a File in Your Project

  • Extension: Custom To-Do Highlights

  • Extension: Any Cool Theme in the Visual Studio Marketplace

  • Extension: ES7 React/Redux/GraphQL/React-Native snippets

  • Feature: Breadcrumbs

• JavaScript and React Code Snippets in VS Code — Increase Your Productivity

• Improve Your React Workflow with These VS Code Extensions

  • Bracket Pair Colorizer

  • Code Spell-Checker

  • ESLint + Prettier

  • Highlight Matching Tag

  • ES7 React/Redux/GraphQL/React-Native snippets

  • VSCode React Refactor

• Introducing Sapling: a VS Code Extension for Traversing React Component Hierarchy

• 7 Must-Know VS Code Extensions for a React Developer