Add eslint to your project, with the howest gp (graduaat programmeren) config

Eslint is a tool that helps you to check for syntax errors or obey to code conventions set by the organisation you will be working in, in this case Graduaat Programmeren of Howest. Although it will help you a lot, this is still prone to error.

The package containing the specific rules for howest-gp it the @howest-gp/eslint-config-howest-gp package. Although you can install eslint manually and add this package (have a look at the eslint website), it can be done quicker with less manual intervention.

This package is a cli (command line interface) that will help you setup through questions and it will install all the necessary tools for you.

Execute the following steps to have eslint configured for vscode.

Prerequisites

To complete this tutorial, you will need the following:

• The latest version Visual Studio Code installed on your machine.
• The latest version of Node installed on your machine. You can accomplish this by downloading and installing the LTS version on the node js website.

Don't know if node is installed or not? Hit node --version in a terminal if you have an output like this:

v18.14.1

then everything works as expected.

Configure Visual Studio Code

Eslint extension

You can make the ESLint warnings/errors visible in VS Code by installing the ESLint extension from the VS Code Marketplace.

• Click the extension menu on the left in vscode

  

• Search for eslint and click on the first item (Plugin by Microsoft)

• Click on install

  

Setup default indentations to 2 spaces

The howest javascript config expects for every indentation 2 spaces (it's a thing in javascript). If you don't want to have any unnecessary errors, it's best to force Visual Studio Code to format this automatically.

Temporarily changing it

In the toolbar in the bottom right corner you will see a item that looks like the following:

After clicking on it you will get the option to indent using either spaces or tabs. After selecting your indent type you will then have the option to change how big an indent is. In the case of our howest-gp config, indentation is set to 2 space characters per indent.

If you want to see the spaces or the differences between spaces and tabs, you can enable Render Whitespace in Visual Studio Code. This can be done to go to View > Appearance > Render Whitespace.

Changing it in settings

To get to your user or workspace settings go to File -> Preferences -> Settings. Verify that you are on the User or Workspace tab depending on your needs and use the search bar to locate the settings. You may also want to disable Editor: Detect Indentation as this setting will override what you set for Editor: Insert Spaces and Editor: Tab Size when it is enabled.

• Disable detect indentation
• Enable Editor Insert spaces
• Set Editor Tab size to 2

Open the project that you are working on

Can this be more clear?

Run the CLI

• Open a new terminal, this can be done by going to Terminal -> new Terminalor by hitting ctrl - shift - µ. You will be defaulted to the root directory of your project, what is a really good thing
• Type the following command in your terminal and hit enter:

  npm init @howest-gp/config@latest

• The first prompt you will get is:

  ? What quotes do you use for strings? ... 
  > Double
    Single

  Select the first one, if you use double quotes (what we recommend), if you are stubborn on using singles, select single and hit enter.
• As a next prompt you will get:

  Checking peerDependencies of @howest-gp/eslint-config-howest-gp@latest
  The config that you've selected requires the following dependencies:
  
  @howest-gp/eslint-config-howest-gp@latest eslint@^8.36.0
  ? Would you like to install them now? » No / Yes

  Select 'Yes' and hit enter. This will create a package.json and install all necessary dependencies.

Added files

The cli will have added following files and folders:

• node_modules: are extra javascript files that were imported to use eslint and our howest gp config.
• .eslintrc.js: is the configuration file of our eslint. You will see that it extends on howest-gp-config. In the rules section there is a possibility to add other rules as well.
• .gitignore: file to ignore the node_modules folder or any other files you don't which to have in your remote repository
• package.json and package-lock.json: package.json determines which dependencies we have in our project. In package-lock.json we specify the exact version, so we don't have any dependency issues when working together. You should push those files to your remote repository.

If you would ever need to clone your project on another computer, just use npm install, this will re-install all the necessary javascript files (those that are specified in package.json) in the node_modules-folder.

Links

• Howest
• Eslint
• Howest Config
• Create Howest Config