Angular Snippets (Version X)Īngular Snippets (Version X) by John Papa There are always new and better ways to work.All the screenshots are from the vscode marketplace. No seriously, I recently discovered Save Without Format.
#COOL VISUAL STUDIO CODE EXTENSIONS CODE#
That’s a basic overview of VS Code extensions I’m currently using to increase efficiency, but I’m finding new ones every day. Learn more about Placeholder Images here. Now you can save time by adding placeholder images right from within VS Code. Services like and are extremely useful. Improve your writing with this must-have extension. Just because you’re writing in markdown, doesn’t mean you have to sacrifice grammar. What good is the perfect setup if it’s not backed up? “Synchronize settings, snippets, themes, file icons, launch, keybindings, workspaces, and extensions across multiple machines using GitHub gist.” Learn more Setting Sync here. Ideal when you have multiple VS Code instances and you want to identify which is which. PeacockĬhange the color of your workspace. This extension displays the import size of the package you are importing right inside the code editor. To learn more about GitLens, check out GitLens in the VS Code Marketplace. GitLens is especially helpful when dealing with merge conflicts. View complete commit history, compare files, view branches, or even look at who committed code and when with line blame. Take control of your projects by bringing the power of Git right into VS Code. Organize your environment by applying an appropriate icon set to visually identify files by type. Rainbow Bracketsįind that missing tag with ease by color-coding every bracket set in your environment. Change a sentence into lowercase, then kebab case. This doesn’t sound like much, but when you combine the Change Case extensions with shortcuts, it becomes a handy tool for switching between all cases. This is especially helpful on tags that wrap extensive amounts of content. This simple extension does one thing: it auto renames paired HTML/XML tags. Try typing “lorem” TAB to fill in “Lorem Ipsum” placeholder text. In addition to Emmet’s sophisticated code expansion, you can also wrap Individual lines with Emmet code snippets:įor more info, check out Chris Coyer’s tutorial on this method. EmmetĮmmet, now built right in, is the VS Code expansion tool you can’t live without. Learn more about alphabetical sorting here. ctrl, a), you can perform this action in less than a second. After mapping this extension to a shortcut (E.g. When it comes to fixing lints, the one rule that continuously needs fixing is PropertySortOrder: true, meaning that all CSS should be alphabetized. You can use this extension to lint CSS right in the VS Code problems panel. scss-lint.yml, can be either globally or project-based. The beauty of SCSS-lint is that your settings file. Revelry even built a linting robot to assist us with such tasks. If you write a lot of CSS then you probably care about the quality of your code. In the meantime, here are 13 VS Code extensions I rely on to speed up my workflow. There are tons of Visual Studio Code extensions out there, but how do you choose the best ones? I encourage you to explore and play. Start by asking yourself: “How much time do I spend each day doing X?” There is probably a VS extension or tool out there that can help you automate / optimize that task. Whether you’re writing CSS or a full-blown Elixir application, leveraging automation in your work can save hours of time each week. Visual Studio Code is my editor of choice (and knowing it is practically a requirement at Revelry, as we often pair-program using the built-in Live Share feature). As a front-end design engineer, I’ve always strived to be more efficient in writing code: better, faster, cleaner.
0 kommentar(er)
