Cookie Consent by Free Privacy Policy Generator 📌 VS Code Setup for Frontend Devs

🏠 Team IT Security News

TSecurity.de ist eine Online-Plattform, die sich auf die Bereitstellung von Informationen,alle 15 Minuten neuste Nachrichten, Bildungsressourcen und Dienstleistungen rund um das Thema IT-Sicherheit spezialisiert hat.
Ob es sich um aktuelle Nachrichten, Fachartikel, Blogbeiträge, Webinare, Tutorials, oder Tipps & Tricks handelt, TSecurity.de bietet seinen Nutzern einen umfassenden Überblick über die wichtigsten Aspekte der IT-Sicherheit in einer sich ständig verändernden digitalen Welt.

16.12.2023 - TIP: Wer den Cookie Consent Banner akzeptiert, kann z.B. von Englisch nach Deutsch übersetzen, erst Englisch auswählen dann wieder Deutsch!

Google Android Playstore Download Button für Team IT Security



📚 VS Code Setup for Frontend Devs


💡 Newskategorie: Programmierung
🔗 Quelle: dev.to

Table of Contents

  • Introduction
  • Theme
  • Icons
  • Extensions
    • Auto Rename Tag
    • Auto Close Tag
    • Code Spell Checker
    • CSS Peek
    • DotENV
    • Error Lens
    • ESLint
    • GitLens
    • HTML Boilerplate
    • HTML CSS Support
    • Import Cost
    • Live Server
    • Markdown Preview Enhanced
    • Path Intellisense
    • Prettier - Code Formatter
    • Project Manager
    • REST Client
    • Trailing Spaces
    • Turbo Console Log
    • Version Lens
    • Angular Language Service
    • ES7 React Redux React Native snippets
    • Docker
    • Kubernetes
  • Settings
  • Conclusion
  • Contact Me

Introduction

In this article, we will explore my personal setup for Visual Studio Code, the popular open-source code editor. I will share the themes, icons, and extensions that I use on a daily basis to enhance my coding experience. Whether you are a seasoned developer or just starting out, this article will give you some insights and inspiration to optimize your own setup. So, let's dive in and see what makes my VS Code setup unique!

Theme

The VS Code theme I most often use is the Default Dark+ theme provided by VS Code default settings, but from time to time, I switch to the One Dark Pro. In general I prefer darker themes, so my eyes are not strained so much.

One Dark Pro

⬇️ Downlaod One Dark Pro

Icons

The icon pack that I use is the well-known Material Icon Theme. I love it because it supports almost every file extension and can be customized for everyone's needs.

Material Icon Theme

⬇️ Download Material Icon Theme

Extensions

Below, I will be discussing the various extensions that I utilize in Visual Studio Code to enhance my coding experience.

Auto Rename Tag

Automatically rename paired HTML/XML tag, same as Visual Studio IDE does.

Auto Rename Tag - Usage

⬇️ Download Auto Rename Tag

Auto Close Tag

Automatically add HTML/XML close tag, same as Visual Studio IDE or Sublime Text does.

Auto Close Tag - Usage

⬇️ Download Auto Close Tag

Code Spell Checker

A basic spell checker that works well with code and documents.
The goal of this spell checker is to help catch common spelling errors while keeping the number of false positives low.

Code Spell Checker - Usage

⬇️ Download Code Spell Checker

CSS Peek

This extension extends HTML and ejs code editing with Go To Definition and Go To Symbol in Workspace support for css/scss/less (classes and IDs) found in strings within the source code.

The extension supports all the normal capabilities of symbol definition tracking, but does it for css selectors (classes, IDs and HTML tags). This includes:

  • Peek: load the css file inline and make quick edits right there. (Ctrl+Shift+F12)
  • Go To: jump directly to the css file or open it in a new editor (F12)
  • Hover: show the definition in a hover over the symbol (Ctrl+hover)

In addition, it supports the Symbol Provider so you can quickly jump to the right CSS/SCSS/LESS code if you already know the class or ID name

CSS Peek - Usage

⬇️ Download CSS Peek

DotENV

Syntax Highlighting support for Environment (.env) Files

DotENV - Usage

⬇️ Download DotENV

Error Lens

ErrorLens turbo-charges language diagnostic features by making diagnostics stand out more prominently, highlighting the entire line wherever a diagnostic is generated by the language and also prints the message inline.

Error Lens - Usage

⬇️ Download Error Lens

ESLint

ESLint is a tool for identifying and reporting on patterns found in ECMAScript/JavaScript code, with the goal of making code more consistent and avoiding bugs.

ESLint is completely pluggable. Every single rule is a plugin and you can add more at runtime. You can also add community plugins, configurations, and parsers to extend the functionality of ESLint.

ESLint - Usage

⬇️ Download ESLint

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.

Commit Graph

GitLens Commit Graph - Usage

Worktrees

GitLens Worktrees - Usage

Git blame file

GitLens Git Blame 1 - Usage

Git blame current line

GitLens Git Blame 2 - Usage

Git blame status bar

GitLens Git Blame 3 - Usage

⬇️ Download GitLens

HTML Boilerplate

This extension provides the standard HTML boilerplate code used in all web applications.

HTML Boilerplate - Usage

⬇️ Download HTML Boilerplate

HTML CSS Support

HTML id and class attribute completion for Visual Studio Code.

  • HTML id and class attribute completion.
  • Supports linked and embedded style sheets.
  • Supports template inheritance.
  • Supports additional style sheets.
  • Supports other HTML like languages.
  • Validates CSS selectors on demand.

HTML CSS Support - Usage

⬇️ Download HTML CSS Support

Import Cost

This extension will display inline in the editor the size of the imported package. The extension utilizes webpack in order to detect the imported size.

I"Import

⬇️ Download Import Cost

Live Server

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

Live Server - Usage

⬇️ Download Live Server

Markdown Preview Enhanced

Markdown Preview Enhanced is an extension that provides you with many useful functionalities such as automatic scroll sync, math typesetting, mermaid, PlantUML, pandoc, PDF export, code chunk, presentation writer, etc. A lot of its ideas are inspired by Markdown Preview Plus and RStudio Markdown.

Markdown Preview Enhanced - Usage

⬇️ Download Markdown Preview Enhanced

Path Intellisense

Visual Studio Code plugin that autocompletes filenames.
To use Path Intellisense instead of the default autocompletion, the following configuration option must be added to your settings:

{ "typescript.suggest.paths": false }
{ "javascript.suggest.paths": false }

Path Intellisense - Usage

⬇️ Download Path Intellisense

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.

Prettier - Usage

⬇️ Download Prettier - Code Formatter

Project Manager

It helps you to easily access your projects, no matter where they are located. Don't miss those important projects anymore.
You can define your own Projects (also called Favorites), or choose for auto-detect Git, Mercurial or SVN repositories, VSCode folders, or any other folder.

Project Manager - Usage

⬇️ Download Project Manager

REST Client

REST Client allows you to send HTTP request and view the response in Visual Studio Code directly.

REST Client - Usage

⬇️ Download REST Client

Trailing Spaces

A VS Code extension that allows you to highlight trailing spaces and delete them in a flash!

Trailing Spaces - Usage

⬇️ Download Trailing Spaces

Turbo Console Log

This extension make debugging much easier by automating the operation of writing meaningful log message.

Turbo Console Log - Usage

⬇️ Download Turbo Console Log

Version Lens

This extension shows version information when opening a package or project.

Version Lens - Usage

⬇️ Download Version Lens

Angular Language Service

This extension provides a rich editing experience for Angular templates, both inline and external templates.

Angular Language Service - Usage

⬇️ Download Angular Language Service

ES7 React Redux React Native snippets

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

ES7+ React/Redux/React-Native snippets - Usage

⬇️ Download ES7+ React/Redux/React-Native snippets

Docker

The Docker extension makes it easy to build, manage, and deploy containerized applications from Visual Studio Code. It also provides one-click debugging of Node.js, Python, and .NET Core inside a container.

Docker - Usage

⬇️ Download Docker

Kubernetes

The extension for developers building applications to run in Kubernetes clusters and for DevOps staff troubleshooting Kubernetes applications.
Works with any Kubernetes anywhere (Azure, Minikube, AWS, GCP and more!).

Kubernetes - Usage

⬇️ Download Kubernetes

Settings

The JSON code below, shows my current VS Code settings:

// settings.json

{
  "breadcrumbs.enabled": true,
  "breadcrumbs.icons": true,
  "[css]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "editor.fontSize": 14,
  "editor.fontFamily": "Menlo, Monaco, 'Courier New', monospace",
  "editor.fontWeight": "normal",
  "editor.wordWrap": "on",
  "editor.autoClosingBrackets": "always",
  "editor.autoClosingQuotes": "always",
  "editor.autoClosingDelete": "always",
  "editor.codeLens": true,
  "editor.codeLensFontSize": 12,
  "editor.bracketPairColorization.enabled": true,
  "editor.guides.highlightActiveBracketPair": true,
  "editor.guides.bracketPairs": "active",
  "editor.minimap.size": "fit",
  "editor.minimap.scale": 1,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true,
  "editor.formatOnPaste": true,
  "editor.formatOnType": true,
  "editor.tabSize": 2,
  "editor.fastScrollSensitivity": 6,
  "editor.renderWhitespace": "none",
  "editor.accessibilitySupport": "off",
  "emmet.includeLanguages": {
    "javascript": "javascriptreact",
    "typescript": "typescriptreact"
  },
  "errorLens.enabled": true,
  "files.autoSave": "afterDelay",
  "files.autoSaveDelay": 500,
  "files.defaultLanguage": "${activeEditorLanguage}",
  "git.autofetch": true,
  "html.format.indentInnerHtml": true,
  "[html]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "javascript.updateImportsOnFileMove.enabled": "always",
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[json]": {
    "editor.defaultFormatter": "vscode.json-language-features"
  },
  "keyboard.touchbar.enabled": true,
  "liveServer.settings.donotShowInfoMsg": true,
  "liveServer.settings.CustomBrowser": "chrome",
  "liveServer.settings.port": 4201,
  "[markdown]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "terminal.integrated.fontSize": 14,
  "workbench.colorTheme": "Default Dark+",
  "workbench.iconTheme": "material-icon-theme",
  "workbench.editor.enablePreview": false,
  "workbench.startupEditor": "newUntitledFile",
  "workbench.editor.wrapTabs": true,
  "[typescriptreact]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "redhat.telemetry.enabled": false,
  "typescript.suggest.paths": false,
  "javascript.suggest.paths": false
}

Conclusion

In conclusion, I shared my personalized Visual Studio Code setup, including the themes, icons, and extensions that I use on a daily basis. These tools help me to streamline my workflow, increase productivity, and provide a visually appealing interface. The combination of these elements is tailored to meet my specific needs and enhance my overall experience with the code editor. By sharing this setup, I hope to inspire others to customize their own VS Code environment and find the tools that work best for them.

Contact Me

...



📌 VS Code Setup for Frontend Devs


📈 39.75 Punkte

📌 Freeware Advanced Audio Coder 1.28 Frontend frontend/input.c wav_open_read WAV File Denial of Service


📈 27.47 Punkte

📌 Freeware Advanced Audio Coder 1.28 Frontend frontend/input.c wav_open_read WAV File denial of service


📈 27.47 Punkte

📌 heise+ | Web-Frontend mit Angular 2: Frontend mit Backend verknüpfen


📈 27.47 Punkte

📌 Frontend devs, what are your thoughts on WordPress? Have you used it in your corporate jobs?


📈 25.91 Punkte

📌 Schatzkiste für Frontend-Devs: Mit diesem Repo lernst du alles, was du wissen willst


📈 25.91 Punkte

📌 Getting Stuff Done: Productivity Tips for Backend and Frontend Devs


📈 25.91 Punkte

📌 Mobile Devs Making the Same Security Mistakes Web Devs Made in the Early 2000s


📈 24.35 Punkte

📌 Cisco Router Web Setup up to 3.3.0 Build 31 Web Frontend privilege escalation


📈 23.7 Punkte

📌 Shared Tailwind Setup For Micro Frontend Application with Nx Workspace


📈 23.7 Punkte

📌 Shared UI Setup For Micro Frontend Application (Module Federation with React) with Nx Workspace


📈 23.7 Punkte

📌 Shared Data-Layer Setup For Micro Frontend Application with Nx Workspace


📈 23.7 Punkte

📌 How setup Firebase on your Frontend project


📈 23.7 Punkte

📌 How To Setup Spring Boot With Vue.js Frontend


📈 23.7 Punkte

📌 AI for Web Devs: Project Introduction & Setup


📈 22.13 Punkte

📌 Cgiscript.net csSearch 2.3 Save Setup csSearch.cgi setup privilege escalation


📈 19.92 Punkte

📌 Gazie 7.32 /setup/install/setup.php hidden_req files or directories accessible


📈 19.92 Punkte

📌 Polr up to 2.2.x Setup /setup/finish comparison


📈 19.92 Punkte

📌 Why is it so tedious and Painful to setup a Windows server, and so quick and easy to setup a Linux server?


📈 19.92 Punkte

📌 CVE-2023-38328 | eGroupWare 17.1.20190111 Setup Panel setup/manageheader.php missing encryption


📈 19.92 Punkte

📌 Raspberry Pi Headless Setup: Here’s How To Setup Raspberry Pi Without A Monitor


📈 19.92 Punkte

📌 How To Get Back to iPhone Setup Screen | iOS Setup Assistant


📈 19.92 Punkte

📌 Vuln: TYPO3 Frontend User Registration Remote Code Execution Vulnerability


📈 17.62 Punkte

📌 Vuln: TYPO3 Frontend User Registration Remote Code Execution Vulnerability


📈 17.62 Punkte

📌 OpenText Extended ECM 22.3 Java Frontend Remote Code Execution


📈 17.62 Punkte

📌 The Top VS Code Extensions Every Frontend Developer Needs in Their Toolkit


📈 17.62 Punkte

📌 The Advantage of Using Cache to Decouple the Frontend Code


📈 17.62 Punkte

📌 35 Awesome Frontend Projects + Source Code


📈 17.62 Punkte

📌 CVE-2023-6996 | Display Custom Fields in the Frontend Plugin up to 1.2.1 on WordPress code injection


📈 17.62 Punkte

📌 Frontend Mentor QR code challenge


📈 17.62 Punkte

📌 Frontend Mentor QR code challenge


📈 17.62 Punkte

📌 10 VS Code extensions for maximum frontend development productivity


📈 17.62 Punkte











matomo