Please indicate the source and the original author
There are many code editors, some free and some paid. One of my favorite Code editors is Visual Studio Code. It’s free and has great features, and I’ve been dropping Atom, Sublime Text, and WebStorm, which is also great.
Today, I’m going to share my favorite code editor Settings for my Web development. I’ll start with what the code editor looks like. After all, physical appearance is important.
🎨The theme
My most commonly used VS Code theme is Snazzy Operator, currently in use.
This theme is hyper-Snazzy based and optimized for use with Operator Mono fonts. I like the theme 😍.
⭐ Some other themes I’ve used before:
- Oceanic Next – I used Oceanic Next (Dimmed BG)
- Emedy – I used Remedy Dark (straight)
✒The font
Another important thing for my code editor is that the font I use for my code editor is JetBrains Mono. This is a free font with hyphen support.
Hyphen is a new font format that supports symbol decoration instead of = > and < =.
Before using JetBrains Mono, I used Operator Mono. This is also a nice font.
⭐ Some other fonts I’ve used before:
- Operator Mono – Supports hyphens.
- Fira Code – free and supports hyphenation.
- Dank Mono – Paid and supported with hyphen.
🌟🌟🌟 Would you like to use my Settings and use my VS Code font? In VS Code, press Ctrl + P, type settings.json and open the file. Now, replace the following property values with my given value.
{
"workbench.colorTheme": "Snazzy Operator"."editor.fontFamily": "'JetBrains Mono', Consolas, 'Courier New', monospace"."editor.fontLigatures": true."editor.fontSize": 14."editor.lineHeight": 22."editor.letterSpacing": 0.5."editor.fontWeight": "400"."editor.cursorStyle": "line"."editor.cursorWidth": 5."editor.cursorBlinking": "solid"
}
Copy the code📁 icon
File ICONS enhance the look and feel of VS Code, mainly by helping us distinguish between files and folders given ICONS. For my VS Code, I use two file ICONS:
- Material Icon Theme – One of VS Code’s most popular Icon themes.
- Material Theme Icons – currently in use.
I use the extension
🟠 Auto Rename the Tag
Automatic renaming of paired HTML/XML tags is also available in JSX.
Add an item in the auto-rename-tag.activationOnLanguage file in settings.json to set the language in which the extension name will be activated. By default, it is **[” * “]** and will be activated for all languages.
"auto-rename-tag.activationOnLanguage": ["html"."xml"."php"."javascript"]
Copy the code
🟠 Bracket Pair Colorizer 2
This extension allows matching parentheses to be identified by color, and the user can define the symbols to be matched, as well as the colors to be used.
🟠 Color Highlight
This extension sets the styles of CSS/Web colors found in documents.
🟠 CSS Peek
- Peek: Loads CSS files inline and makes quick edits there. (Ctrl + Shift + F12)
- Go to: Jump directly to the CSS file or open it in a new editor (F12)
- Hover: Hover a definition over a symbol (Ctrl + Hover)
🟠 DotENV
Highlight key-value pairs in the.env file.
🟠 ES7 React/Redux/GraphQL/React-Native snippets
This extension provides you with JavaScript and React/Redux fragments from ES7, as well as VS Code’s Babel plug-in capabilities.
🟠 Highlight Matching Tag
Highlight the matching start or end tag.
The style of the extension I used:
"Height-matching-tag. styles": {"opening": {"left": {"custom": {"borderWidth": "0 0 0 1.5px", "borderStyle": {"custom": {"borderWidth": "0 0 1.5px", "borderStyle": {"custom": {"borderWidth": "0 0 1.5px", "borderStyle": "solid", "borderColor": "yellow", "borderRadius": "5px", "overviewRulerColor": "white" } }, "right": { "custom": {"borderWidth": "0 1.5px 0 0", "borderStyle": "solid", "borderColor": "yellow", "borderRadius": "5px", "overviewRulerColor": "white" } } } }Copy the code🟠 Image preview
Display image preview while hovering.
🟠 Indent Rainbow
This extension colors the indentation before the text, alternating four different colors at each step.
🟠 REST Client
The REST Client allows you to send HTTP requests and view the response directly in Visual Studio Code.
🟠 Settings Sync
Use GitHub Gist to synchronize Settings, snippets, themes, file ICONS, launches, key bindings, workspaces and extensions across multiple machines. Specific operation can see my this article “tip | synchronous your VSCode Settings and extensions, replacement don’t worry!”
🟠 TODO Highlight
Highlight TODO, FIXME, and other comments in your code.
🟠 Version Lens
Displays the latest version of each package in the package.json file.
📃 Terminal set
My operating system is Windows and I use Git from the command line, so I have a Git terminal that I use as my integration terminal. My terminal Settings are as follows:
"terminal.integrated.shell.windows": "C:\\Program Files\\Git\\bin\\bash.exe"."terminal.integrated.fontFamily": "FuraMono Nerd Font"."terminal.integrated.fontSize": 12."terminal.integrated.rightClickCopyPaste": true
Copy the code✔ Useful VS Code shortcuts
I use some important keyboard shortcuts in my daily life that have made Visual Studio Code more productive for me.
- Ctrl + P: Go to File, you can move to any file in the open file/folder in Visual Studio Code.
- Ctrl + ‘: Open Terminal in VS Code
- Alt + Down: Move Down a line
- Alt + Up: Move Up one line
- Ctrl + D: Moves the selected character to the next matching string
- Ctrl + Space: the suggestion is triggered
- Shift + Alt + Down: Copies rows Down
- Shift + Alt + Up: Copies rows Up
- Ctrl + Shift + T: Reopens the newly closed window
Thank you for your reading and attention.
If you have inspiration and help, you can click a concern, forward, favorites, also can leave a message to discuss, this is the greatest encouragement to the author.
About the author: Web front-end engineer, full stack development engineer, continuous learner.
Now pay attention to “front-end foreign language selection” wechat public number, now pay attention to also send some network high-quality video course network disk information ah, can save you a lot of money!
