View source | Discuss this page | Page history | Printable version   

How To Setup ESLint And Prettier In Your IDE

Contents

Introduction

Starting from PR19Q3, Openbravo uses Prettier as JavaScript formatter and ESLint as linting tool (more details). Among its advantages, both are supported by most modern IDEs, so they can be configured to check linting as you code and properly format files when saving.

Eclipse

There is no known plugins to add support for ESLint or Prettier. However, built in Openbravo scripts can still be used.

Visual Studio Code

Visual Studio Code supports both ESLint and Prettier via extensions. Please, install the extensions shown in the screenshot below:

VSCodeExtensions.png

Then, make sure you run npm ci on your Openbravo root folder to install the tools before using it in your IDE.

To access settings.json press Ctrl + Shift + P in VSCode, then search Preferences: Open Settings (JSON).

OptionVSCodePreferences.png

For Prettier, in order to use our config file to format, the following option should be enabled: "Prettier: Require Config", or in settings.json:

{
...
  "prettier.requireConfig": true,
...
}

In addition, add the following line in settings.json to enable autoformatting of file when saving the file:

{
...
   "editor.formatOnSave": true,
...
}

IntelliJ

IntelliJ Ultimate has built-in support of ESLint and supports Prettier via Plugin.

IntelliJESLintConfig.png

IntelliJPrettierConfig.png

Sublime Text

ESLint just works by installing SublimeLinter and then SublimeLinter-eslint packages using PackageControl.

Prettier can be used by installing the package JsPrettier in PackageControl. By default, this plugin will search for the Prettier CLI in the following order:

If none applies, it is required to introduce the path of the Prettier CLI in JsPrettier settings (Preferences|Package Settings|JsPrettier):

{
...
  "prettier_cli_path": "<path_to_prettier_executable>"
...
}

Atom

Atom supports both ESLint and Prettier via packages.

Retrieved from "http://wiki.openbravo.com/wiki/How_To_Setup_ESLint_And_Prettier_In_Your_IDE"

This page has been accessed 12,726 times. This page was last modified on 24 January 2020, at 11:07. Content is available under Creative Commons Attribution-ShareAlike 2.5 Spain License.