If Linter is not installed, please follow the instructions here. Hack on a separate topic branch created from the latest master.
Please note that modifications should follow these coding guidelines: Vertical whitespace helps readability, don’t be afraid to use it.
Run Ruby tests, Spec examples, and Cucumber features from Atom We all know great tooling can help us move faster and be more productive when coding.
With this in mind, I asked front end developers at Shopify what packages and plugins they couldn’t live without. And so, based on those conversations and a bit of research, I’ve put together a list of the top 21 testator packages.
To makes things easier to parse, I’ve split up these Atom packages into the following categories in no particular order. Installing new packages with Atom is a bit easier than with other editors like Sublime Text.
Simply type cmd +, (on a Mac) or CTRL +, (on a PC) to bring up the Settings View, click on the Installation tab, and type the package name you want to install into the Search packages input. Whether you offer marketing, customization, or web design and development services, the Shopify Partner Program will set you up for success.
Join for free and access revenue share opportunities, tools to grow your business, and a passionate commerce community. Emmett is the number one code snippet tool used by front end developers.
Emmett helps to create HTML and CSS faster with the use of snippets. One thing to note is that there are currently some issues with tab completion and the Emmett package in Atom.
Super simple to use, and unlike a few of the other auto close packages on Atom, this one is actually maintained and works. Simply start typing a command and hit enter, and the snippet will be inserted for you.
Just make sure your cursor is in the file you want to git-blame, otherwise this keyboard shortcut will collapse folders in the tree-view sidebar. The Git-Plus package provides a bunch of shortcuts to commonly used git actions, without the need to switch to terminal.
This tool shows you a visual plot of commits in your current file over time. You can click on the time plot, or hover over it and see all the commits for a specific time range.
Syntax highlighting is also key when it comes to feeling comfortable in your text editor. Thankfully, Atom has some pretty robust syntax highlighting to begin with, so there aren’t many packages needed to enhance its capabilities.
For this package to work, you need to have Ruby installed on your system, as well as a version of the latest scss-lint gem, otherwise you’ll get a bunch of errors when saving SCSS files. This package requires that Ruby be installed on your system, as well as a version of the latest robocop gem.
This is also a great package to use if you’re using Jekyll for emulating static sites or blogs. What this means is that most developers who use Atom started with another editor like Sublime Text or TextMate, and noticed certain UI features missing out-of-the-box.
Some of these packages recreate UI components already found in these other text editors, while others bring brand-new ideas into Atom altogether. It’s super helpful to easily determine what a specific hex code might be, especially if the color isn’t labelled by a variable.
If the Minimal package is present a thumbnail preview is shown, otherwise it defaults to a suitable file icon. It allows you to share your workspace with team members and collaborate on code in real time.
The autocomplete-paths package autocompletes require and import statements in your editor, so you don’t need to look up any paths. The script package enables you to run code from Atom directly.
The community responded rapidly, and it now boasts a thriving ecosystem of users and contributors. If you aspire to be an Atom power-user, here’s a list of the testator packages that will boost your productivity and make your coding far easier.
Atom packages are external software programs and bits of code that add extra functions to the main product, thus enhancing its capabilities. Downloading and installing the packages is easy, and they can vastly enhance the user experience of the main program.
Many of them may not apply to your workflow or the languages you work with, though, so you should only install the testator packages for you. No developer finds it convenient to switch from the browser to the editor and vice-versa for the whole day.
Another of the testator packages, git-blame lets you toggle annotations in the Atom editor. To do so, you just need to press CTRL + B or right-click on your file then select Git Blame.
Make sure that you do this in the correct file; otherwise, you might toggle the wrong item or collapse your folders in a tree-view sidebar. This is a package that doesn’t do much on its own, but it provides a foundation that you can use within Atom to add linter plugins faster.
It has support for most languages, and it works with HTML, HALL, JSON, CSS, SCSS, Java, and more. Overall, linters are used to improve the quality of code and reduce the number of errors.
It lets you view the visual plot of your file commits, and it’s also interactive. Making it readable without involving much effort is possible with Atom Beautify, an Atom package that requires one single click to clean up hundreds of lines of code.
Those who work in bigger teams might find this package very useful, as the code will be formatted in a standard manner that everyone can read without problems. The package supports various languages, including HTML, CSS, Python, Ruby, C, and more.
These snippets work well for ECMAScript 6, and they are very easy to learn since their names are intuitive, short, and catchy. Front-end developers who use Shopify’s template language Liquid can make use of language-liquid to highlight their syntax.
This is where language-liquid steps in and saves the users from wasting hours checking their code. Teletype deserves its spot in the list of the testator packages as it brings something new to the table: allowing you and your team to collaborate in one workspace.
Teletype lets you share your code with another programmer and grants them access to editing it in real-time. Teletype can be used to make team-based collaborations as well, so it is not restricted to sharing code with one single person, but with multiple ones.
Since 2017, Teletype is among the favorite packages of many developers out there, encouraging concepts such as pair programming and social coding. You can also create new ones within Advanced Open File, which reduces the time needed to do so in Atom.
Atom is programmed to display the filename in the tree view when accessing the editor window. It’s a small change with a big effect, so you should give it a try and see how your workflow improves.
Page Layout Plus lets you control the distribution of each pane, also giving you the option to use shortcuts. Taking actions in ITIS quite difficult because you always need to switch to the terminal.
It is based on shortcodes, and you only have to press cmd/CTRL + Shift + H. All Git commands can be run with this package. Pigments is a convenient package that scans your file and detects the existent color codes which are then displayed.
If you work with color transformation functions like LESS or Stylus CSS, Pigments can help you too, as it has out-of-the-box features for it. You can customize the marker type or set up different color words for every file.
You can adjust color values much faster in a CSS file, which is a helpful feature for those who work in the web design industry. For those who are familiar with Sublime Text, a minimal is a useful feature for developers who like to see a preview of their file content in the code editor window.
Besides its main functionality, you can also display bookmarks, linter markers, and Pigments colors. It is a cool package that comes in very handy for developers who prefer writing their notes directly into the code.