Setup ESLint and Prettier globally for VSCode

What is the Linter?

A linter, or a code linter, is a tool used by software developers to analyze source code and flag potential issues or errors in the code. The term "lint" originally referred to a Unix utility that checked C language source code for potential problems, but now the term "linter" is used more broadly to refer to tools that check code in a variety of programming languages.

Linter tools can check for a variety of issues, such as syntax errors, unused variables, incorrect use of language constructs, and more. By running a linter on their code, developers can catch issues early in the development process and improve the overall quality of their code. <br/> E.g: ESLint for JavaScript, Pylint for Python and RuboCop for Ruby.

What is ESLint?

ESLint is a popular, powerful linting tool for JavaScript that helps developers identify and fix errors in their code. By configuring ESLint globally for VSCode, you can ensure that all your projects use the same linting rules and avoid having to set up ESLint for each project individually

Install ESLint Vscode extension

• Open the Extensions tab by pressing the shortcut CMD + Shift + X<br/>
• Type eslint or dbaeumer.vscode-eslint
• Click the install button

Supported commands

Install eslint globally

npm install -g eslint

Create the configuration file

Create the configuration file with automatically

Using CLI command line

eslint --init

Using Vscode command

Press Cmd + Shift + P and type Create Eslint Configuration and follow the instruction

# For NodeJS
✔ How would you like to use ESLint? · style
✔ What type of modules does your project use? · commonjs
✔ Which framework does your project use? · none
✔ Does your project use TypeScript? · No / Yes
✔ Where does your code run? · browser
✔ How would you like to define a style for your project? · guide
✔ Which style guide do you want to follow? · airbnb
✔ What format do you want your config file to be in? · JavaScript

Create the configuration file with manually

1. Install necessary packages

# For React JS
npm install -g eslint eslint-config-airbnb eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-react eslint-plugin-react-hooks
# For NodeJS
npm install -g eslint eslint-config-airbnb-base eslint-plugin-import

2. Create .eslintrc file

touch .eslintrc

{
  "env": {
    "browser": true,
    "es6": true,
    "commonjs": true,
    "es2021": true,
    "node": true
  },
  "extends": ["airbnb-base"],
  "overrides": [],
  "parserOptions": {
    "ecmaVersion": "latest"
  },
  "rules": {
    "no-console": "off",
    "comma-dangle": "off",
    "arrow-parens": "off"
  }
}

If the the error is not highlight

Executing the keyboard shortcut Cmd + Shift + P, type in "Restart ESLint Server" Once you've done that, you'll be able to see the error report, as shown in the following image.

Prettier

If you want to format your Node.js code in a consistent and automatic way, you can use Prettier, a popular code formatter that integrates with many editors and build tools To configure Prettier for your project, you need to create a .prettierrc configuration file in the root of your project. Here's an example Prettier configuration file for a Node.js project:

.prettierrc
{
  "printWidth": 100,
  "tabWidth": 2,
  "useTabs": false,
  "semi": true,
  "singleQuote": true,
  "trailingComma": "es5",
  "bracketSpacing": true,
  "arrowParens": "avoid"
}

Now executing the keyboard shortcut: Option + Shift + F to format code <br />

Alternatively, you can configure VSCode to format your code automatically on save by adding the following setting to your settings.json file:

"editor.formatOnSave": true

With this setting enabled, VSCode will format your code with Prettier every time you save a file.

Conclusion

In this tutorial, we learned how to set up ESLint globally for VSCode. By following these steps, you can save time and ensure consistent code quality across all your projects. Remember to customize your ESLint configuration file according to your needs and preferences. Happy linting!

References

https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint https://eslint.org/docs/latest/use/command-line-interface