![]() ![]() I’m not going to make any recommendation on an editor theme, since it’s a personal preference thing, but for the record I’m using One Dark Pro, available here. Tooling to build and run React Native-based mobile applications Snippets for boilerplate code in the latest AngularJS version Simple word expansion plugin, you type a short series of letters and this generates popular boilerplate for React Components The framework specific ones: Simple React Snippets You get a browser window inside the editor, which comes in handy when you use the debugger or are limited on screen estate. Useful to check on language behaviour for certain expressionsĪ list of features of editing markdown files, when you want to make sure your README file, looks nice is valid markdownĬhanges the font color, if it contains words like TODO and notations you define to make discoverability of important comments easier Offers larger git capabilities – diff between commits, a superset of the built-in git clientĪ nice set of icons for different file formats, make finding files easierĮasy refactoring for React code (Extract components, convert class components to functional one)Īllows to select a piece of code in the editor and run it in the console. Here are some that are nice to have: GitLens Spawns a localhost server, that will render your page live When it sees you want to call a method on an array, it will show the most popular array methods, etc. The AI-based auto-completion suggestions from Microsoft, which complements the built-in one. Linter for syntax highlight for JavaScript and TypeScriptĪ very opinioned code formatter, that is somewhat of a de-facto standard for code formatting in the JavaScript and TypeScript communities To be able to use the debug tools like breakpoints, watch variables and so on, you will need to have one of the two, depending on which browser you use for development You get immediate color feedback inside the editorĭebugger for Chrome / Debugger for Microsoft Edge ![]() Highlights any color text starting with # or Hex values with the color it represents, which is quite handy for easily finding the right color you want to edit. Shows a popup with a color picker inside the editor, to facilitate picking a color, instead of having to search on the web or use a color palette from a different piece of software It automatically edits the closing tag, as you edit the opening one, quite time-saving when it comes to generic HTML and working with ReactJS componentsĬolors matching brackets in different colors to easily see code blocks, it speeds up troubleshooting if you have incorrectly closed if statement for example So here is my list of essential and nice to have extensions for web development: Auto Rename Tag The editor comes with outstanding support for TypeScript and JavaScript out of the box, so nothing to install there, unless you want to try out nightly builds of the newest language features, which I wouldn’t advise, unless you really know what you are doing. PHP is an entire universe of extensions in itself, but let’s be honest, if you can avoid PHP, you should! You will also see that I focus on TypeScript/JavaScript, rather than PHP and Ruby, despite still being web development. This is why not going overboard with the number of extensions is quite important.Īn important disclaimer I’d like to make is that I’ll try my best to be agnostic from frameworks like ReactJS, AngularJS or VueJS. It’s a text editor built with ElectronJS, so it runs on a slimmed down runtime of Chromium, so it’s quite a memory hungry piece of software. to start it up with opening up the current directory as a project folder. Once done, go to your home folder and run code, which when used will start up Visual Studio Code, but if not installed it will kick off the installer automatically. If you want to run exclusively in WSL on Windows, my advice is to first set up WSL nicely, you can check out my popular guide on how to setup Windows Terminal, WSL and ZSH. The user version facilitates the background auto-update when you don’t have elevated privileges on the machine and the 64-bit version can address more RAM memory, offering better performance. If on Windows, download the User and 64-bit version for your platform. To install natively on your operating system, you can head off to the download page here. Nowadays, you have quite a few options for text editors and IDEs, but the most established and still gaining steam is Visual Studio Code, followed by WebStorm and Sublime Text. This setup guide is intended for people starting up web development and some of the best tips & tricks when working with Visual Studio Code in 2020.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |