Share several vs Code plug-ins I use everyday

{"type":"doc","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":" In this article , I'd like to introduce my favorite Visual Studio Code Expand . Most of the time , I use VS Code I wrote JavaScript Applications （ standard JavaScript、React、Angular、NodeJS…… Every kind of ）."}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","text":"Bracket Pair Colorizer 2"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https:\/\/static001.geekbang.org\/resource\/image\/ce\/11\/ce3144efde176065a2922f0e2b96cb11.jpeg","alt":null,"title":"","style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":"","fromPaste":false,"pastePass":false}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":" This extension is great , It can help me figure out JavaScript Complex nesting in promise. seeing the name of a thing one thinks of its function , It can change the color of square brackets , Help me figure out if I'm confused somewhere （ For example, missing square brackets ）. It matches by default ()、[] and {} And so on ordinary bracket , But you can also define custom brackets if you need to ."}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":" It also has many other cool features , For example, define the color or show the binding line for the active bracket and so on . It's worth trying a wave of ."}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"link","attrs":{"href":"https:\/\/github.com\/CoenraadS\/Bracket-Pair-Colorizer-2","title":"xxx","type":null},"content":[{"type":"text","text":" Project links "}]}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"link","attrs":{"href":"https:\/\/marketplace.visualstudio.com\/items?itemName=CoenraadS.bracket-pair-colorizer-2","title":"xxx","type":null},"content":[{"type":"text","text":"Marketplace"}]}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","text":"NPM Intellisense"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https:\/\/res.cloudinary.com\/practicaldev\/image\/fetch\/s--HOLE-QaW--\/c_limit%2Cf_auto%2Cfl_progressive%2Cq_66%2Cw_880\/https:\/\/dev-to-uploads.s3.amazonaws.com\/i\/s005hd6048rc9nq4eb6s.gif","alt":null,"title":"","style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":"","fromPaste":false,"pastePass":false}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":" As shown in the moving picture , It can be done automatically to NPM Package targeted require import sentence . It can help a lot , Especially when your project gets big , And in package.json When there are many dependencies in . I don't want to miss this plug-in again , Strongly recommend ！"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"link","attrs":{"href":"https:\/\/github.com\/ChristianKohler\/NpmIntellisense","title":"xxx","type":null},"content":[{"type":"text","text":" Project links "}]}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"link","attrs":{"href":"https:\/\/marketplace.visualstudio.com\/items?itemName=christian-kohler.npm-intellisense","title":"xxx","type":null},"content":[{"type":"text","text":"Marketplace"}]}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","text":"Path Intellisense"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https:\/\/res.cloudinary.com\/practicaldev\/image\/fetch\/s--K-Ts4pdR--\/c_limit%2Cf_auto%2Cfl_progressive%2Cq_66%2Cw_880\/https:\/\/dev-to-uploads.s3.amazonaws.com\/i\/22bqyik3xkyiden2hkxl.gif","alt":null,"title":"","style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":"","fromPaste":false,"pastePass":false}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":" This is a NPM Intellisense The sister plug-in for . It performs the same auto completion , But it's your file system . The maintainer of these two plug-ins is the same person , I don't want to miss this good thing again ！"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"link","attrs":{"href":"https:\/\/github.com\/ChristianKohler\/PathIntellisense","title":"xxx","type":null},"content":[{"type":"text","text":" Project links "}]}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"link","attrs":{"href":"https:\/\/marketplace.visualstudio.com\/items?itemName=christian-kohler.path-intellisense","title":"xxx","type":null},"content":[{"type":"text","text":"Marketplace"}]}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","text":"Quokka.js"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https:\/\/res.cloudinary.com\/practicaldev\/image\/fetch\/s--JDVWE2sJ--\/c_limit%2Cf_auto%2Cfl_progressive%2Cq_66%2Cw_880\/https:\/\/dev-to-uploads.s3.amazonaws.com\/i\/kl5z1bcfovf077cbyxc3.gif","alt":null,"title":"","style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":"","fromPaste":false,"pastePass":false}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":" If you just want to try something , Don't try to set up the project first , So this tool is a good aid . By checking the output in real time , It will immediately display the output in JavaScript\/TypeScript Next to the code , As shown in the moving picture . It's a good extension , Especially suitable for debugging purpose ."}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"link","attrs":{"href":"https:\/\/quokkajs.com\/","title":"xxx","type":null},"content":[{"type":"text","text":" Project links "}]}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"link","attrs":{"href":"https:\/\/marketplace.visualstudio.com\/items?itemName=WallabyJs.quokka-vscode","title":"xxx","type":null},"content":[{"type":"text","text":"Marketplace"}]}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","text":"Docker"}]},{"type":"image","attrs":{"src":"https:\/\/res.cloudinary.com\/practicaldev\/image\/fetch\/s--9-eufsNK--\/c_limit%2Cf_auto%2Cfl_progressive%2Cq_66%2Cw_880\/https:\/\/dev-to-uploads.s3.amazonaws.com\/i\/0cjchdht1de0y3iiokhc.gif","alt":null,"title":"","style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":"","fromPaste":false,"pastePass":false}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":" Because I often use NodeJS, So I'm used to using it completely Docker Set up the development environment . Before we find this extension , I can only use CLI."}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":" This extension deals with multiple Docker Images and containers are essential , Because you can use it to quickly browse which containers are running 、 Which images to build and which networks to create ."}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":" If you use it every day Docker, So I strongly recommend this extension ."}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"link","attrs":{"href":"https:\/\/github.com\/microsoft\/vscode-docker","title":"xxx","type":null},"content":[{"type":"text","text":" Project links "}]}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"link","attrs":{"href":"https:\/\/marketplace.visualstudio.com\/items?itemName=ms-azuretools.vscode-docker","title":"xxx","type":null},"content":[{"type":"text","text":"Marketplace"}]}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","text":"Live Server"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https:\/\/res.cloudinary.com\/practicaldev\/image\/fetch\/s--tZOFIZ66--\/c_limit%2Cf_auto%2Cfl_progressive%2Cq_66%2Cw_880\/https:\/\/dev-to-uploads.s3.amazonaws.com\/i\/arkvmit72xjn2twc7eaw.gif","alt":null,"title":"","style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":"","fromPaste":false,"pastePass":false}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":" I still use static websites and standards from time to time JavaScript, And I don't want to install things like webpack-dev-server Things like that . This extension provides hot overloading for local development servers , So it can help me solve this problem , That is, it will refresh the page as soon as it saves any changes to the file . It has a beautiful... In the status bar “Go Live” Button , You can start the server with just one click . If you haven't used it yet , Be sure to look at this extension ."}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"link","attrs":{"href":"https:\/\/github.com\/ritwickdey\/vscode-live-server","title":"xxx","type":null},"content":[{"type":"text","text":" Project links "}]}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"link","attrs":{"href":"https:\/\/marketplace.visualstudio.com\/items?itemName=ritwickdey.LiveServer","title":"xxx","type":null},"content":[{"type":"text","text":"Marketplace"}]}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","text":"Auto Close Tag and Auto Rename Tag"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https:\/\/res.cloudinary.com\/practicaldev\/image\/fetch\/s--xx5ZAZdh--\/c_limit%2Cf_auto%2Cfl_progressive%2Cq_66%2Cw_880\/https:\/\/dev-to-uploads.s3.amazonaws.com\/i\/e2jnn99mppyaav7h9zoi.gif","alt":null,"title":"","style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":"","fromPaste":false,"pastePass":false}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":" They are VS Code Two plug-ins for , Automatically rename and close tags to help you maintain HTML file . This also applies to React Their own JSX grammar . If you want to save some time , Please try ."}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":" Project address ："}]},{"type":"bulletedlist","content":[{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"link","attrs":{"href":"https:\/\/github.com\/formulahendry\/vscode-auto-close-tag\/","title":"xxx","type":null},"content":[{"type":"text","text":"Auto Close Tag"}]}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"link","attrs":{"href":"https:\/\/github.com\/formulahendry\/vscode-auto-rename-tag\/","title":"xxx","type":null},"content":[{"type":"text","text":"Auto Rename Tag"}]}]}]}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"Marketplace："}]},{"type":"bulletedlist","content":[{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"link","attrs":{"href":"https:\/\/marketplace.visualstudio.com\/items?itemName=formulahendry.auto-close-tag","title":"xxx","type":null},"content":[{"type":"text","text":"Auto Close Tag"}]}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"link","attrs":{"href":"https:\/\/marketplace.visualstudio.com\/items?itemName=formulahendry.auto-rename-tag","title":"xxx","type":null},"content":[{"type":"text","text":"Auto Rename Tag"}]}]}]}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","text":"Markdown Preview Enhanced"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https:\/\/static001.geekbang.org\/resource\/image\/2f\/45\/2f44d86ecbe42cyy6671a2ef68b31645.png","alt":null,"title":"","style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":"","fromPaste":false,"pastePass":false}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":" I use Markdown Do a lot of things . for example , stay hashnode.com or dev.to Write an article on , Document my private project , Or in markdown Take notes to straighten out your ideas . Most of the time , I use it all. VS Code To write it , Find Markdown Preview Enhanced Before plug in , I've always been short of easy to use Markdown Preview tool . It doesn't just give you a preview , And there's synchronous scrolling 、PDF Export and PlantUML The function of . I really like this tool , So use it often Markdown People highly recommend ."}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"link","attrs":{"href":"https:\/\/github.com\/shd101wyy\/vscode-markdown-preview-enhanced","title":"xxx","type":null},"content":[{"type":"text","text":" Project links "}]}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"link","attrs":{"href":"https:\/\/marketplace.visualstudio.com\/items?itemName=shd101wyy.markdown-preview-enhanced","title":"xxx","type":null},"content":[{"type":"text","text":"Marketplace"}]}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","text":" Summary "}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":" That's what I use most every day VS Code Expand . I hope you've found something new that's useful for your workflow , Any useful extensions you have can also be recommended in the comments ."}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"strong"}],"text":" Link to the original text ："}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"link","attrs":{"href":"https:\/\/dev.to\/klamserdev\/vs-code-extensions-i-use-daily-568i","title":"","type":null},"content":[{"type":"text","text":"https:\/\/dev.to\/klamserdev\/vs-code-extensions-i-use-daily-568i"}]}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}}]}