- Install eslint
- Install js-beautify
- Install Atom's plugins
- Install Sublime Text's plugins
- ESLint configuration
- JSBeautify configuration
https://github.com/GreenGlobalDevs/node-style-guide
ESLint and JSBeautify are the node.js packages that provide needed engine to check and format code. Primitively, they only have command line interface. But people can build GUI for them - in the format of plugins run on the source code editors like Atom and Sublime Text.
In order to install ESLint and JSBeautify, you must have node.js already. So the first step is go to nodejs.org and install latest Node.js core. Rely on your platform, you can download .msi, .pkg or build from source.
Once you have got node.js, it's easy to install eslint with npm command:
Windows:
npm install -g eslint
Linux:
sudo npm install -g eslint
Similar to eslint, we install js-beautify with npm command:
Windows:
npm install -g js-beautify
Linux:
sudo npm -g install js-beautify
Okay, if everything is OK, let's start installing needed plugins.
We would need the following 3 plugins: linter, linter-eslint, and atom-beautify.
Edit --> Preferences --> Install:
In the "Search packages" field, type "linter", then Enter, then scroll down to the package named "linter". Press "install" button at right side:
Do same thing with linter-eslint and atom-beautify.
Search and install linter-eslint:
Search and install atom-beautify:
With Sublime Text, we also need 3 plugins: SublimeLinter, SublimeLinter-contrib-eslint and JsFormat.
Because Sublime Text does not have built-in package management tool, we need Package Control plugin first. Please follow the intructions here to install if not yet.
Then, from Sublime Text interface, press "Ctrl + Shift + P" to open Package Control menu, choose "Install Package".
In the empty field, type "SublimeLinter", then click on the matched item.
Do same thing with "SublimeLinter-contrib-eslint" and "JsFormat".
Search and install SublimeLinter-contrib-eslint:
Search and install JsFormat:
The simplest way to configure ESLint to check your project's coding convention is make use the capability of "ESLint Shareable Configs" by following the guide here:
After everything done, you can download the examples to see how it works. Extract downloaded .zip file, open it with Atom and browse to the JS files under /examples directory.
The following figures, I'm opening the project "node-style-guide" and "examples/bad.js", the result is really bad:
Sublime Text gives the same result:
You can clone this repo to run checking with command line:
git clone https://github.com/greenglobal/node-style-guide.git
cd node-style-guide
npm install
npm run lint
The result looks like this:
What we need to do here is fix the code until no any red flag appears :)
If the script file is too long, manual fixing may take a little time, you can use JSBeautify that supports auto formatting.
In the "node-style-guide" folder, you can see another file named ".jsbeautifyrc". This is config file used by atom-beautify plugin in Atom and JavaScript Beautify in Sublime Text. Each time when you press "Ctrl + Alt + B" or "Ctrl + Alt + F" key combination, these plugins can use JSBeautify core to reformat your source code. Unfortunately, this tool is not very powerful so it may leave some of the things that you need to fix by hand.
In short, to follow convention, we would need to add 2 config files - .eslintrc.json and .jsbeautifyrc - into the root of project folder. Thus, the plugins of Atom and Sublime Text will handle about 80% of of the work for you.