An Interest In:
Web News this Week
- March 31, 2024
- March 30, 2024
- March 29, 2024
- March 28, 2024
- March 27, 2024
- March 26, 2024
- March 25, 2024
VSCode setup for web development: settings and extensions
Today's the day. Hello dear friends and welcome back to a new article written by me, your Boobo.
In this article I want to present you my VSCode setup for web development. As a daily tool VSCode is exactly what I need to accomplish my tasks.
I mainly write JavaScript code these days, but I used to write code for Golang, PHP, bash scripts, SQL queries, Java or Python. I consider it very useful and very powerful text editor. But this is not about what VSCode is, but my setup so let's begin.
VSCode settings
The following JSON config is the configuration of my environment. You can simply paste this by pressing
MAC: CMD+SHIFT+PWindows/Linux: CTRL+SHIFT+P
Type in the opened window: Preferences: Open Settings(JSON) and there paste the following JSON object:
{ "editor.minimap.enabled": false, "explorer.openEditors.visible": 0, "git.autofetch": true, "window.zoomLevel": -1, "workbench.colorCustomizations": {}, "workbench.colorTheme": "One Dark Pro", "workbench.iconTheme": "vscode-icons", "editor.formatOnSave": true, "todo-tree.highlights.customHighlight": { "TODO": { "background": "#00b248", "foreground": "#66ffa6", "icon": "checklist", "type": "text" }, "FIXME": { "background": "#c79400", "foreground": "#fff64f", "icon": "alert", "type": "text" } }, "todo-tree.regex.regexCaseSensitive": false, "todo-tree.filtering.excludeGlobs": [ "**/node_modules/**" ],}
Extensions
I used many extensions by time to time depending on my tasks, but this is what I like about VSCode setup instead of IDEs. You can configure it day by day without having the same configuration all the time. Because VSCode is very lite by default.
Rainbow Brackets
It's a very cool tool, coloring the brackets and offering a good.
code --install-extension 2gua.rainbow-brackets
GitLens
GitLenssuperchargesthe Git capabilities built into Visual Studio Code. It helps you tovisualize code authorshipat a glance via Git blame annotations and code lens,seamlessly navigate and exploreGit repositories,gain valuable insightsvia powerful comparison commands, and so much more.
I like gitlens because it offers you a lot of cool features related to git. You can see all the branches, commits, tags. You can see who modified a line of code last time, what the latest changes of a file are and other cool stuff. Give it a try!
code --install-extension eamodio.gitlens
Git History
code --install-extension donjayamanne.githistory
EditorConfig for VS Code
This pluginattemptsto override user/workspace settings with settings found in
.editorconfig
files. No additional or vscode-specific files are required. As with any EditorConfig plugin, ifroot=true
is not specified, EditorConfigwill continue to lookfor an.editorconfig
file outside of the project.
code --install-extension EditorConfig.EditorConfig
Prettier - Code formatter
Prettieris 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
GraphQL Markdown YAML
code --install-extension esbenp.prettier-vscode
Todo Tree
I like Todo Tree very much because of its configuration. Is very simple to use, provides a very simple but very solid functionality. But the far away best feature of it is about highlighting todo or fixme keywords in code. Personally I opt for highlighting the whole line.
code --install-extension Gruntfuggly.todo-tree
Code Time
Offers daily and weekly reports of your programming activity right in your code editor.
code --install-extension softwaredotcom.swdc-vscode
vscode-icons
I really like this plugin because makes my text editor much friendly and offers me a good overview over file types. I suggest you to give it a try.
code --install-extension vscode-icons-team.vscode-icons
Theme
OI don't know about you, but personally I really like dark screens. I love to see my computer dark and I love dark mode themes. Currently, I use One Dark Pro Theme.
code --install-extension zhuangtongfa.Material-theme
I hope you enjoyed it. If you have more questions for me about my daily setup, don't wait after my articles, go to the contact form and write me directly. I'll write a whole article special for your question.
My name is Boobo from 94 8-)
and you just catch the tiger out of the cage.
Original Link: https://dev.to/boobo94/vscode-setup-for-web-development-settings-and-extensions-13hp
Dev To
An online community for sharing and discovering great ideas, having debates, and making friendsMore About this Source Visit Dev To