Home>Article>Development Tools> How do effective developers personalize VS Code plugins and configurations?
2 years ago, I gave up Sublime Text and choseVisual Studio Codeas my code editor.
I spend 5 to 6 hours on VS Code every day, so it is necessary to optimize the VS Code configuration according to my needs. In the past 2 years, I have tried various plug-ins and configurations, and now I feel that everything is perfect. It is time to share my usage skills with you!
VS Code has a very rich set of plug-ins. Here I recommend a few of my favorite VS Code plug-ins. .
Downloads: 1.67 million
I use Prettier to unify the code style, when I save the HTML/CSS/JavaScript file it automatically formats the code. This way, I don't have to worry about code formatting. Since Prettier itself cannot be personalized, it may sometimes cause discomfort, but at least it ensures that team members can easily unify the coding style.
npm plug-in can check whether the npm module defined in package.json is consistent with the actually installed npm module:
npm Intellisense plug-in will Index package.json so that when I require a module, it can be autocompleted.
Bracket Pair Colorizer can automatically color matching brackets in the code and distinguish them with different colors, so that we can easily identify the beginning and end of a certain code block.
The function of the Auto Close Tag plug-in is very simple. It can automatically complete the closing tag of HTML/XML.
I like Gitlens very much because it helps me quickly understand the modification history of the code.
Current Line Blame: View the end of the current line of code and view the name, time and information of the latest commit
Current Line Hovers
: View the detailed latest commit information in the floating box of the current line of code.
Markdown All in One
Markdown All in One plug-in helps me write README and other MarkDown files. I especially like the way it handles lists and tables.
Automatically adjust the numerical sequence of the list##Automatically format the table
In addition to installing various plug-ins, we can also personalize our VS Code by configuring the User Settings of VS Code.
I really like fonts with ligatures (ligatures, ligatures, hyphens or combined characters). Ligatures combine more than one letter into one glyph. I mainly useFira Codeas the font I use for programming, as shown in the picture below=>and===:
My font configuration is as follows:
"editor.fontFamily": "'Fira Code', 'Operator Mono', 'iA Writer Duospace', 'Source Code Pro', Menlo, Monaco, monospace", "editor.fontLigatures": true
Regarding indentation, I configure it like this:
"editor.detectIndentation": true, "editor.renderIndentGuides": false,
When the import path is moved or renamed, it will automatically Update:
"javascript.updateImportsOnFileMove.enabled": "always",
The following is my VS Code configuration fileuser-settings.json:
{ "workbench.colorCustomizations": { "activityBar.background": "#111111", "activityBarBadge.background": "#FFA000", "list.activeSelectionForeground": "#FFA000", "list.inactiveSelectionForeground": "#FFA000", "list.highlightForeground": "#FFA000", "scrollbarSlider.activeBackground": "#FFA00050", "editorSuggestWidget.highlightForeground": "#FFA000", "textLink.foreground": "#FFA000", "progressBar.background": "#FFA000", "pickerGroup.foreground": "#FFA000", "tab.activeBorder": "#FFA000", "notificationLink.foreground": "#FFA000", "editorWidget.resizeBorder": "#FFA000", "editorWidget.border": "#FFA000", "settings.modifiedItemIndicator": "#FFA000", "settings.headerForeground": "#FFA000", "panelTitle.activeBorder": "#FFA000", "breadcrumb.activeSelectionForeground": "#FFA000", "menu.selectionForeground": "#FFA000", "menubar.selectionForeground": "#FFA000" }, "editor.fontSize": 14, "editor.lineHeight": 24, // These are for subliminal, check them out. "editor.hideCursorInOverviewRuler": true, "editor.lineNumbers": "on", "editor.overviewRulerBorder": false, "editor.renderIndentGuides": false, "editor.renderLineHighlight": "none", "editor.quickSuggestions": true, // end subliminal changes "editor.fontFamily": "'Fira Code', 'Operator Mono', 'iA Writer Duospace', 'Source Code Pro', Menlo, Monaco, monospace", "vsicons.projectDetection.autoReload": true, "editor.formatOnPaste": false, "editor.formatOnSave": true, "editor.fontLigatures": true, "prettier.tabWidth": 4, "editor.wordWrap": "on", "editor.detectIndentation": true, "workbench.iconTheme": "eq-material-theme-icons-palenight", "editor.minimap.enabled": false, "editor.minimap.renderCharacters": false, "prettier.parser": "flow", "workbench.editor.enablePreview": false, "emmet.includeLanguages": { "javascript": "javascriptreact", "jsx-sublime-babel-tags": "javascriptreact" }, "emmet.triggerExpansionOnTab": true, "emmet.showExpandedAbbreviation": "never", "workbench.statusBar.visible": true, "workbench.activityBar.visible": true, "workbench.editor.showIcons": false, "editor.multiCursorModifier": "ctrlCmd", "explorer.confirmDelete": false, "window.zoomLevel": 0, "javascript.updateImportsOnFileMove.enabled": "always", "materialTheme.accent": "Yellow", "editor.cursorBlinking": "smooth", "editor.fontWeight": "500" }If you If you want to know more tips on using VS Code, you can check outVSCode Can Do That.
Original address: http://tilomitra.com/vs-code-settings-and-extensions-for-faster-javascript-development/
This article is a free translation, and the copyright belongs to the original author
Recommended tutorial:vscode tutorial
The above is the detailed content of How do effective developers personalize VS Code plugins and configurations?. For more information, please follow other related articles on the PHP Chinese website!