Must use Atom Packages
- Emmet
It’s a code snippet tool which enable you to create HTML & CSS faster. Refer https://docs.emmet.io/abbreviations/ for abbreviations.
To type a html basic structure: type html and press enter - atom-beautify
cleans up your code, and makes it more readable. To use: Press ctrl+alt+b in any open file (.html, .css, .scss, .js, etc). - color-picker
You just need to right-click and choose ‘Color Picker’ (CMD/CTRL+SHIFT+C) Color Picker works if your cursor is on the text on CSS/SASS/LESS files that contain one of the following color formats: HEX, HEXa, RGB, RGBa, HSL, HSLa, HSV, HSVa, VEC3 and VEC4, or color variable on SASS or LESS. - file-icons
File Icons add icons to a filename based on the corresponding file type. It will add visual improvements when you open a file on tab or on tree view. The file icons are customizable, you can add your own icon and change the color through the LESS files in the packages/file-icons/styles directory. The default icon comes in 8 colors and 3 variants (light, medium and dark). - javascript-snippets
JavaScript Snippets lets you quickly write a portion of JS source code. With defined abbreviation you don’t need to write code word for word, for instance just type cl to make console.log and gi for getElementById. - jquery-snippets
It’s a code snippet tool which enable you to create jQuery faster. To use: Start typing jQuery code and options will appear as your type. Press tab to select the snippet you want to use. - atom-live-server
Launch a http server with live reload capability. See your changes live in the browser, without refreshing it. - script-runner
This package will run various script files inside of Atom, and uses a proper terminal for output. It currently supports JavaScript, CoffeeScript, Ruby, Python, Bash, Go and anything with a shebang line.
Steps to install any package
- Open Atom application,
- Go to packages> settings view> install ( Shortcut: CTRL + , )
- Search for the package you want to install.
- Click on Install