My Front story----beautiful editor of GitHub Atom

Source: Internet
Author: User
Tags git commands

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

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.