Add VS Code useful extensions (#21690)
This commit is contained in:
sndrx
Tom
@ -4,53 +4,34 @@ title: Source Code Editors
|
|||||||
|
|
||||||
## Source Code Editors
|
## Source Code Editors
|
||||||
|
|
||||||
Source code editors are the programs that allow for code creation and
|
Source code editors are the programs that allow for code creation and editing. Any text editor can be used to write code. But dedicated code editors offer many useful features, including: text completion, markup coloring, and tabs/panes for side-by-side editing. These features can be useful even to new users who don't know their way around all of the advanced options.
|
||||||
editing. Any text editor can be used to write code. But dedicated code
|
|
||||||
editors offer many useful features, including: text completion,
|
|
||||||
markup coloring, and tabs/panes for side-by-side editing. These features can
|
|
||||||
be useful even to new users who don't know their way around all of the
|
|
||||||
advanced options.
|
|
||||||
|
|
||||||
There are many, many editors available to download or use
|
There are many, many editors available to download or use online, both paid and free. They offer many of the same core-features, but each have their own subtleties. Further research may help find the one that's right for you. The following editors are all cross-platform and free to use or evaluate.
|
||||||
online, both paid and free. They offer many of the same core-features, but
|
|
||||||
each have their own subtleties. Further research may help find the one that's
|
|
||||||
right for you. The following editors are all cross-platform and
|
|
||||||
free to use or evaluate.
|
|
||||||
|
|
||||||
## <a href='https://www.sublimetext.com/' target='_blank' rel='nofollow'>Sublime Text</a><img src="https://i.imgur.com/3ALtws1.png" width="50px">
|
## [Sublime Text](https://www.sublimetext.com/)<img src="https://i.imgur.com/3ALtws1.png" width="50px">
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
Sublime Text is a very popular editor that has been around <a href='https://www.sublimetext.com/blog/articles/one-point-oh' target='_blank' rel='nofollow'>since 2008</a>. There
|
Sublime Text is a very popular editor that has been around [since 2008](https://www.sublimetext.com/blog/articles/one-point-oh). There are many options and [extensions](https://packagecontrol.io/search/sublime?sort=popularity) available, and a lot of [help available online](http://stackoverflow.com/search?q=sublime+text) to help set it up. Sublime Text is free to download and evaluate, but the license for continued use costs $70.
|
||||||
are many options and <a href='https://packagecontrol.io/' target='_blank' rel='nofollow'>extensions</a> available,
|
|
||||||
and a lot of <a href='http://stackoverflow.com/search?q=sublime+text' target='_blank' rel='nofollow'>help available</a>
|
|
||||||
online to help
|
|
||||||
<a href='http://www.websightdesigns.com/wiki/Setting_up_Sublime_Text_3' target='_blank' rel='nofollow'>set it up</a>.
|
|
||||||
(The license for continued use costs $70\. However, Sublime Text is free to
|
|
||||||
download and evaluate, with a nag-screen pop-up.)
|
|
||||||
|
|
||||||
## <a href='http://brackets.io/' target='_blank' rel='nofollow'>Brackets</a><img src="https://i.imgur.com/fassWYs.png" width="50px">
|
## [Brackets](http://brackets.io/)<img src="https://i.imgur.com/fassWYs.png" width="50px">
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
Brackets is a relatively new open-source editor by Adobe. It is very user
|
Brackets is a relatively new open-source editor by Adobe. It is very user friendly, especially for people who aren't used to command-line interfaces or JSON-style settings/prefereces. Extensions and themes are quick and easy to find and install through the Extension Manager.
|
||||||
friendly, especially for people who aren't used to command-line interfaces
|
|
||||||
or JSON-style settings/prefereces. Extensions and themes are quick and easy
|
|
||||||
to find and install through the Extension Manager.
|
|
||||||
|
|
||||||
## <a href='https://atom.io/' target='_blank' rel='nofollow'>Atom</a><img src="https://i.imgur.com/woj5vPm.png" width="50px">
|
## [Atom](https://atom.io/)<img src="https://i.imgur.com/woj5vPm.png" width="50px">
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
Atom is an <a href='https://github.com/atom/atom' target='_blank' rel='nofollow'>open source</a> editor, developed
|
Atom is an [open source](https://github.com/atom/atom) editor, developed by [GitHub](https://github.com/). Atom is very popular and configurable("hackable", as they say), but the advanced features may be overwhelming to new users. There is also plenty of helpful documentation available online.
|
||||||
by <a href='https://github.com/' target='_blank' rel='nofollow'>GitHub</a>. Like Sublime Text, Atom is quite popular.
|
|
||||||
It is very configurable ("hackable", as they say) but advanced features may
|
|
||||||
be overwhelming to new users. There is also plenty of <a href='http://readwrite.com/2014/05/20/github-atom-5-tips-getting-started-tutorial-corey-johnson/' target='_blank' rel='nofollow'>helpful</a> <a href='http://flight-manual.atom.io/' target='_blank' rel='nofollow'>documentation</a>
|
|
||||||
|
|
||||||
<a href='http://stackoverflow.com/search?q=atom' target='_blank' rel='nofollow'>availble</a> online.
|
#### Atom resources:
|
||||||
|
- [5 Tips for getting started](http://readwrite.com/2014/05/20/github-atom-5-tips-getting-started-tutorial-corey-johnson/)
|
||||||
|
- [Atom flight manual](http://flight-manual.atom.io)
|
||||||
|
- [Atom on stackoverflow](http://stackoverflow.com/search?q=atom)
|
||||||
|
|
||||||
|
## [Visual Studio Code](https://code.visualstudio.com/)<img src="https://i.imgur.com/b4vFsKa.png" width="50px">
|
||||||
## <a href='https://code.visualstudio.com/' target='_blank' rel='nofollow'>Visual Studio Code</a><img src="https://i.imgur.com/b4vFsKa.png" width="50px">
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
@ -61,24 +42,15 @@ Its main features are:
|
|||||||
* Debugging - Be able to debug using break points, call stacks and an interactive console.
|
* Debugging - Be able to debug using break points, call stacks and an interactive console.
|
||||||
* Build-in Git - Review diffs, stage files, make commits, push and pull, all available in the editor.
|
* Build-in Git - Review diffs, stage files, make commits, push and pull, all available in the editor.
|
||||||
* Extensions - Install extensions to add new languages, themes, debuggers, and connect additional services.
|
* Extensions - Install extensions to add new languages, themes, debuggers, and connect additional services.
|
||||||
* Tasks - Automate tasks like linting, building, packaging, testing or deploying software systems.
|
|
||||||
|
|
||||||
## <a href='https://atom.io/' target='_blank' rel='nofollow'>WebStorm</a>
|
**A few extensions that make your life easier and more interesting while using Visual Studio Code are:**
|
||||||
|
- [VS Live Share](https://marketplace.visualstudio.com/items?itemName=MS-vsliveshare.vsliveshare) - invite someone into your editor and code together
|
||||||
DON'T COMPROMISE ON DEVELOPMENT EXPERIENCE
|
- [GitLens](https://gitlens.amod.io/) - helps visualize the code authorship
|
||||||
The smartest editor
|
- [Visual Studio Keymap](https://marketplace.visualstudio.com/items?itemName=ms-vscode.vs-keybindings) - in case you switched to VS Code from Visual Studio
|
||||||
Use the full power of the modern JavaScript ecosystem – WebStorm’s got you covered! Enjoy the intelligent code completion, on-the-fly error detection, powerful navigation and refactoring for JavaScript, TypeScript, stylesheet languages, and the most popular frameworks.
|
- [Debugger for Chrome](https://marketplace.visualstudio.com/items?itemName=msjsdiag.debugger-for-chrome) - if you are using Google Chrome browser too
|
||||||
|
- [Auto Close tag](https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-close-tag) - automatically adds HTML/XML close tag
|
||||||
Web
|
- [Auto rename tag](https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-rename-tag) - automatically rename paired HTML/XML tag
|
||||||
* Angular
|
- [ESLint](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint) - for making sure your code conforms to ESLint formatting
|
||||||
* React
|
- [Path Intellisense](https://marketplace.visualstudio.com/items?itemName=christian-kohler.path-intellisense) - autocompletes filenames
|
||||||
* Vue.js
|
- [TODO highlight](https://marketplace.visualstudio.com/items?itemName=wayou.vscode-todo-highlight) - Highlight TODO, FIXME and other annotations within your code
|
||||||
Mobile
|
- [Code Snippets](https://marketplace.visualstudio.com/search?term=snippets&target=VSCode&category=All%20categories&sortBy=Relevance) - snippets for anything you need
|
||||||
* Ionic
|
|
||||||
* Cordova
|
|
||||||
* React Native
|
|
||||||
Server
|
|
||||||
* Node.js
|
|
||||||
* Meteor
|
|
||||||
Desktop
|
|
||||||
* Electron
|
|
||||||
|
|||||||
Reference in New Issue
Block a user