To install the Andrew Wray’s ALE plugin, for example, in the package ‘internet’:

$> mkdir -p ~/.vim/pack/internet/start
$> cd ~/.vim/pack/internet/start
$> git clone https://github.com/w0rp/ale.git
$> cd ale
$> git checkout [chosen_version]

Get the list of all available versions by pressing ‘TAB’ right after the ‘checkout’ command. To build the plugin documentation, one needs to type the following into a ‘vim’ session as root user:

:helptags ALL

Next, documentation will be directly available inside ‘vim’ by launching the following command:

:help ale

Using a linter in Vim

From the ‘ale_linters’ directory the programmer can choose which programming language(s) and compiler(s) to support. For example, to activate the linter for CSS on save, the following can be added to the ‘.vimrc’:

let g:ale_linters = {
\ 'css': ['csslint'],
\ }
let g:ale_lint_on_enter = 0
let g:ale_lint_on_save = 1

Before installing the linter, in the ‘vim’ package directory, open the configuration file for CSSLint located under ‘ale/ale_linters/css’ named ‘csslint.vim’ in order to find out how CSSLint is launched. The section of interest will be similar to the following:

. . .
return 'csslint --format=compact ' . l:config_option . ' %t'
endfunction
. . .

Therefore, ‘vim’ will be calling ‘csslint –format…’… write this information down.

Create a testing CSS file like the following:

@import "another.css";
p {
   colorr: red;
}
.foo {
   background: #FFF;
   background: rgba(255, 255, 255, 0.5);
   background: rgba(255, 255, 255, 0.5);
}

Next, the NodeJS project will need to be initialized by launching the following on the same directory level than the CSS file above

$> npm init

As the default ‘package.json’ will not contain the required dependency to CSSLint, the following will have to be appended to it in the right spot:

"devDependencies": {
   "csslint": "1.0.5"
}

Let’s download the code using npm:

$> npm install

Find out where the ‘csslint’ application has been installed (see the notes you took before) and modify $PATH accordingly as ‘vim’ has to be able to find it!

Finally, the testing step. Open the testing CSS file with ‘vim’ and save the file using the standard ‘vim’ commands. All CSS errors will be pointed out and a description will be available at the bottom of the screen… The programmer is then able to integrate any sort of analysis tool without having to install anything… the code was just downloaded onto the project directory, nothing was globally installed! The next sections of this tutorial will show how to make ‘vim’ even more productive.

Open the CSS file again using ‘vim’ and type:

:ALEInfo

This shows all options that can be configured on the ‘.vimrc’ file and their current value. This is the very first command to run when things do not run smoothly and some debug is needed.

Beautify the code automatically in Vim

Moreover, a code formatter will beautify the code for you. For example, to install ‘Prettier’ the following lines are to be appended to ‘.vimrc’:

let g:ale_fixers = { 'css': ['prettier'] }
let g:ale_fix_on_save = 1

The dependency section of the ‘package.json’ for the project has to be updated accordingly:

"devDependencies": {
   "prettier": "2.0.5",
   "csslint": "1.0.5"
}

Run ‘npm install’ again in order to download the additional code and next open the CSS file again using ‘vim’ and start changing the file layout: the editor will automatically beautify the code using the right layout as soon as the file is about to be stored onto disk. Using the same procedure, create a JavaScript file and configure ‘ESLint’ as fixer. It will be able to work on the following:

1. Unnecessary boolean casts.
2. Unnecessary parentheses.
3. Multiple spaces in regular expressions.
4. Consistent brace style across the entire program.
5. Unnecessary ‘.bind()’.
6. Variable multiple declaration.
7. Much more!

It is possible to use multiple fixers at the same time using the following syntax in the ‘.vimrc’:

let g:ale_fixers = { 'javascript': ['prettier', 'eslint'] }

Programmers can use all of them, at the same time!

Navigate references and definitions in Vim

To be able to find and navigate references and definitions in program files, add a dependency to ‘Typescript’ to ‘.vimrc’:

"devDependencies": {
   "prettier": "2.0.5",
   "csslint": "1.0.5",
   "typescript": "3.9.7"
}

Next, run ‘npm install’ to download the new software. Create a JavaScript file that defines and calls some functions and then open it with ‘vim’ to try the following commands:

1. :ALEHover prints information about the object under the cursor.
2. :ALEGoToDefinition prints the definition for the object under the cursor.
3. :ALEFindReferences prints references for the object under the cursor.

Watch this tutorial on YouTube