Atom Integration with Prettier and Stylelint.
If you spend any significant amount of time writing code you probably use code formatters to style your code and catch errors either consciously or not in one form or another ,via inbuilt IDE tools and plugins or linters.
Linters are tools used to find potential errors and/or formatting inconsistencies in your code. If you are not familiar with linters and why you should use them a quick introduction can be found here and here .
A quick search on google shows a lot of detailed articles explaining how to integrate linters such as prettier , eslint and stylelint with VSCode a popular editor from Microsoft . However if you are like me and prefer to use Atom as your default code editor, go-to guides on linter are scarce. This article aims to fill in that gap: (at least on Ubuntu 18.04) .
Atom install
Install Node.js and NPM with NVM
Atom relies extensively on npm for its plugins so its a good idea to have node installed CORRECTLY! on your machine.
Node can be installed in multiple ways (if you are really interested you can find out how here) . However , if you are a developer you will probably use npm a lot (npm IS the largest package repository in the world ) and I recommend using the method shown here to install Node.js and NPM and the Node Version Manager (NVM) to avoid issues in future.
To install NVM, download the installation script from GitHub. For that, you will use the curl command line.
- Download the NVM installation script with the command:
curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.33.11/install.sh | bashAfter it automatically clones the NVM repository and adds the NVM path to ZSH or Bash, you will receive the following output:
3. To enable NVM close and open the terminal
4. Finally, check whether the installation was successful by verifying nvm version:
nvm --versionOnce you have installed nvm, you can find a list of all the available Node.js versions with the command:
nvm ls-remote
4. To install a specific version
nvm install 12.16.3nvm use 12.16.3nvm alias default 12.16.3
restart terminal
Install Prettier
There are two ways of doing this ,you can install prettier directly on your machine,or as a plugin for atom.
Method 1
install prettier globally to your machine
npm install --global prettierIn order to use prettier in your project,cd into your project folder then
npm init -yadd a package.json file to your project folder and add prettier as a dependency by
npm install --save-dev --save-exact prettierrun prettier from terminal to format your css file in this case style.css
prettier [path]/style.css –writeMethod 2
Install plugin directly in Atom
apm install prettier-atomOr go to Settings → Packages and search for prettier-atom. Make sure to restart Atom after the package is installed.
There are two ways to format your code:
Automatically format on save (requires enabling in Packages → Prettier → Toggle Format on Save)
Run the command Prettier: Format to invoke Prettier manually
- Windows/Linux: ctrl + alt + f
- Mac: control + option + f
Prettier will search up the file tree looking for a prettier config to use. If none is found, Prettier will use its default settings.
Install Stylelint in Atom
Method 1
Install stylelint plugin directly in atom
apm install linter-stylelintOr go to Settings → Packages and search for linter-stylelint.
linter-stylelint runs stylelint against your CSS, SCSS, Less, PostCSS, and SugarSS files.
Configuring stylelint
You can pass a configuration to stylelint in any of the following ways:
- Place a configuration file (
.stylelintrcorstylelint.config.js) in your project's root folder or in any parent folder. - You can find a sample stylelint.config,js file here
And that’s it!! Prettier and Stylelint can now be used in your projects.
Bugs and Tips
- Occasionally prettier hangs when trying to format very large files, this is a known bug as detailed here and here and hopefully will be resolved soon. In the meantime if it happens to you simply format the project from terminal like so:
prettier src/stylesheets/*.css –writeprettier src/*.html –write
2. Another bug that I have come across though rarely is due to stylelint dependencies .A full explanation can be found here . Atom throws the following warning.
Undefined rule function-calc-no-invalidTo resolve this just update stylelint in your dev dependencies or update stylelint globally
npm install –g stylelintnpm install --save-dev stylelint
I will keep this list updated with bugs and fixes as I come across them on my day to day usage ,if they grow in number significantly I can probably dedicate a page to them in future.
