This is the 17th day of my participation in the August More text Challenge. For details, see: August More Text Challenge.
preface
About [front end tool series] : There is a saying, half the effort to get twice the result, it must be with the help of some ideas and tools.
VSCode is our front-end development weapon, this article 40+ selected plug-ins, make it more sharp, invincible!!
The necessary
I won’t mention the essentials below
- Code segment
- JavaScript code snippets (ES6), ES7 React/story/GraphQL/React – Native snippets
- Vue, vetur, vue 3 Snippets, vue VSCode Snippets
Code snippets, you can also customize this, you can see VSCode to create custom code snippets
- Code review and formatting
- ESLint, Prettier – Code formatter, Beautify
- other
- open in browser
Because of the enhancements in VSCode itself, plug-ins such as npm-scripts, Change Case, and so on do not need to be installed.
More exciting next!! , the whole high dynamic diagram, please don’t be distracted!
Practical and efficient tools
scode-js-debugThe debug tool
The new version of VSCode is built-in.
Replace the Debugger for Chrome plugin for debugging Node.js, Chrome, Edge, WebView2, VS Code extensions, etc. It can also debug Service Worker, Web Worker, function is exceptionally powerful.
As shown below, you first configure itlaunch.json
Live ServerStatic server
Start a local development server with real-time reloading for both static and dynamic pages.
This is one of my favorite plugins to use at ordinary times, right click start, but also support hot, cool word.
Code RunnerCode runner
Favorite plug-in, no three, usually write some test code, and some logic library, shortcut key Ctrl+Alt+M, drink saliva, look at the results, leisurely.
Run code snippets or code files in multiple languages with one click: 6, Ruby, Go, Lua, PowerShell, BAT/CMD, BASH/SH, f # Script, f # (. NET core), c # scripts, more than you’d think.
Markdown Preview EnhancedMarkdown edit and preview
Typora? You don’t need to, this MarkDown plugin lets you preview markdonwn while editing, making the programming experience just as good as nuggets.
If you need more features such as TODO, or multi-line modification, Markdown All in One is a good choice.
Here are some common TODO notes.
Git History 和 GitLensGit History
Who moved my code? Check Git history, search, and version comparison directly in VSCode. Cool!!!!!
VSCode also has built-in timeline functionality, but it’s still less powerful.
GitLens is more powerful for seamless navigation and browsing of Git repositories.
Image PreviewPreview picture
CSS, and worry about writing wrong picture address! It supports small previews on the left side of HTML and CSS files that know right and wrong at a glance when using image paths.
JSON to TSConvert JSON to TS declaration
Nowadays, who doesn’t write TypeScript, but how do you generate declaration files? Write by hand. You’re out. This plug-in, one key generation.
Other people are handy, I am drinking tea, smile.
vscode-fileheader 和 koroFileHeaderGenerated file Remarks
Someone one day to write, someone one day to update, to leave footprints, a glance through!
If that’s not enough for you, koroFileHeader offers more nuanced comments, as well as support for generating function comments.
npm IntellisenseThe NPM module imported intelligent prompts
So many NPM modules, memory is not good, the brain is not fast, it doesn’t matter, this plug-in for you to worry.
Import CostDependency package size hint
How much will it cost you to introduce so many packages? Cost early know, give her!
formate: CSS/LESS/SCSS formatterCSS Style beautification
VSCode built-in CSS formatting function, this support less, SCSS, efficient and beautiful, as you!
TODO HighlightHighlighting the TODO
Highlight TODO, FIXME, and other comments in your code.
Sometimes, you forget to check the TODO that was added at coding time before releasing your code to production.
Add jsdoc commentsAdd JSDoc to the method
Automatically add JSDoc to methods, don’t say I can’t comment, I’m responsible for every line of code I write!!
DotENVEnv files are highlighted
These days, anyone who hasn’t used an env configuration file, not highlighted, really ugly, this is your savior.
HTML SnippetsThe HTML code
This plugin can output HTML code quickly, efficiency is lazy, right?
Wrap Console Log LiteQuick output variables
We often use the output variable console.log to see the execution, this plugin, directly for you to generate book code, can be lazy, lazy to the extreme.
Quokka.jsDirect display of variable results
You can know the results of your code without having to run it, and the programming experience is gone, so spend more time on logic.
REST ClientRest requests
Want to request an interface for a site, Axios? , express? No, No, No, open VS Code and just send the request.
This plug-in allows you to send the HTTP request directly and see the response in visualstudio code.
Path IntellisenseReference path intelligence prompt
vscode-fakerGenerating fake data
Who hasn’t created some fake data? It’s that simple!
Regex PreviewerI’m going to write regular and see what happens
While writing the re, you can see the results, this debugging is really convenient!!
SVG ViewerSVG file preview
Preview SVG files and become images everywhere!
Auto Close TagAutomatic closing label
Automatically adds HTML/XML closing tags, same as the Visual Studio IDE or Sublime Text.
Auto Rename TagLabel renaming
Automatically renames pairs of HTML/XML tags, the same as the Visual Studio IDE.
Sometimes we get it wrong, so this will reduce the cost of fixing it if you do.
CSS PeekCSS locator
Where is my class defined? I can’t even find it. How to do?
Code Spell CheckerSpell check
Mom doesn’t worry about me miswriting words anymore. It can check spelling errors, and give hints, very good partner!
Color PickerColor selector
That color is beautiful, don’t worry, adjust the outstanding board, slowly choose.
Sort Typescript importsImport automatic sorting
Import too many libraries, dazzling, this plugin to put them in order, obsessive-compulsive patients lucky star. I think ESLint has a similar rule.
Bracket Pair Colorizer 2Brace alignment sharps
Too much code, too many braces, don’t know who is whose who, this plugin for you to show.
vscode-iconFile icon
Let vscode resource tree directory with ICONS, pleasing to the eye!
npmNPM extension
This extension enables you to run the NPM script defined in the package.json file and validate the installed modules against the dependencies defined in package.json. Isn’t that cool!
Project ManagerProject management tool
It helps you easily access your projects, no matter where they are located. Don’t miss any more important projects.
Live Sass CompilerSASS is compiled in real time
A VSCode extension that helps you compile/transfer SASS/SCSS files to CSS files in real time and reload the browser in real time.
Todo TreeTODO show
List your ToDos in a tree structure and never worry about forgetting anything
Markdown PDFTurn markdown PDF
Markdown writes the article and generates the PDF by the way, which is really 6
Write in the last
If you think it’s good, your praise is the biggest motivation for me to move forward.
The technical exchange group, please come here. Or add my wechat dirge-cloud and study together.
reference
Selected! VSCode is a must-have plug-in that you have installed but don’t know how to use. marketplace.visualstudio