Many of the front-end students are using sublime text, I was also in use, but later came into contact with the Atom, it is deeply attracted by its high value ~ ~ is a github engineer Oh ~ aesthetic is high Atom
As a cross-platform editing software, installation and use are very convenient, just contact the classmate is also easy to find sublime text in the shadow, which is very convenient for people like me to move over, then the most basic I do not introduce, today this article to just contact Atom's classmates bring some common plug-ins , you will find that atom can become more beautiful ~ ~
Plugin Chaptereffects can be viewed in the home page of the plugin
Atom-beautify: This is a code to beautify the plug-in, almost all the mainstream language support, can fully meet the front-end students use.
Autocomplete-paths: Common IDE Alumni often find themselves entering images when they are introduced. or/or the folder name will automatically display the contents of the folder, very practical, highly recommended.
Autoprefixer: Many front-end classmates often forget to add compatibility prefixes when writing CSS styles, such as-webkit-and so on, so after the completion of the CSS only need this plugin can automatically help you to add all the necessary compatibility prefixes.
Color-picker: As an aesthetic design to the front end, often need to confirm whether their color properties is perfect, then you need this plug-in, you can see in any one of the color properties of a complete color picker.
Docblockr: We not only to write code, but also to develop the habit of writing good comments, and often see the open source framework of the students will find that the great God of the code will have a perfect note, write clear all the parameters and use, you will feel that the great God is not only code professional, attitude is very serious, in fact, With this plugin, you just need a tab key to write the same professional comments! highly recommended !!!
Emmet: With sublime text of the students know this plugin, I do not say much here.
File-icons: Don't you think there's a pretty icon in front of every file you want?
Grunt-runner: As a front end, grunt believe everyone has heard that because of this plugin you can directly in the editor to operate your grunt task.
Git-plus: Although the native atom supports git commands, this plugin will make you more likely to use Git in atom, which makes it easy to use Git's classmates on windows.
Linter: Do you think your code is very unprofessional? This plugin will automatically prompt you for non-canonical areas of your code, and if you wish to get a more complete hint, try a more detailed series, such as Linter-jshint
Markdown-format,markdown-writer: If you are not a Mac user and very fond of using markdown to write things, then you will love to write markdown on Atom ~ ~
Minimap: Used sublime text of the classmate must know the right side of the convenient thumbnail, is it so useful tool atom will not? No! This plugin will let you see familiar thumbnails, then why use plugins? Because this plugin can continue to install plugins! You will find a really powerful shrink! Slightly! Figure!
Package |
Description |
Minimap-codeglance |
Students who have used Webstrom will remember that there is a function of the code magnifier, this plugin will let your mouse move to the thumbnail when you zoom in to show the part of the code |
Minimap-find-and-replace |
When you want to replace the word you will think of ctrl+d, can you know how many of the text you want to replace the string? With this plugin you will be able to see all the strings you have selected on the thumbnail image. |
Minimap-git-diff |
With this plugin, you'll see the difference between the thumbnails and the previous git whenever you change your code. |
minimap-highlight-selected |
When you select a part of the code, it will appear highlighted in the thumbnail image |
Minimap-linter |
This plugin allows you to display a more beautiful and complete thumbnail image |
APM Install |
Having said so much, how do we install plugins for thumbnails? With this command, you can download and install the thumbnail plugin you need on the command line. |
Project-manager: Finish A front dog, I believe that you develop not only one project ~ then you need this plugin to manage all your projects in an atom.
Javascript-snippets: This plugin is also my highly recommended !!! Do you think HTML is the only Emmet? Too Young for you! This plugin will tell you that Javascrpt also has emmet the same plugin! Just enter a few letters, a tab allows you to complete a long list of code!!
Expose: When you open more than one file at a time perhaps you will use a split screen to view, but I believe your screen is not big to allow you unlimited split screen, then you need to switch in multiple files, or to view multiple files, then you can click on the top of the label, that there is more convenient? Some!! That's the plugin, Shift+atl+e, that's the effect:
Just ask you! Beauty! No! Beauty!
Vim-mode: If you are a loyal vim party, I believe this plugin you will love!
Theme Articles
Although the original atom is very beautiful, but since the atom is so focused on plug-ins, theme with plug-ins is also very common, here I recommend I have been using and highly recommended a theme, Atom-material-ui, why do I have to use this plugin? Because this plug-in is not only good color matching, more importantly, it has a lot of animation, so that your editor more vivid, you will prefer it, every day to play the mood will be much better oh ~
But one thing to note is that if you use a cool expose plugin, you will need to add
Close here, otherwise the expose plugin will not appear so cool effect.
End
Today is here, the last one of my current editor of the family ~ Although a few days to deploy their favorite editor, but I just like to toss this beautiful editor, every day to play the code are looking at this beautiful guy ~ not only the mood pleasure ~ coding efficiency is high ~2333~~
< ( ̄▽ ̄) >
My Front story----beautiful editor of GitHub Atom