@ssoltech/eslint-config-prettier

SSOLTECH ESLint, Prettier config for TypeScript.

Setup

1) Setup regular SSOLTECH ESLint Prettier config

npm install --save-dev @ssoltech/eslint-config-prettier

or

yarn add --dev @ssoltech/eslint-config-prettier eslint @typescript-eslint/eslint-plugin @typescript-eslint/parser eslint-config-prettier eslint-plugin-prettier prettier

2) Configure ESLint

ESLint statically analyzes your code to quickly find problems. It is built into most text editors and you can run ESLint as part of your continuous integration pipeline.

ESLint defines rules related to TypeScript syntax.

The .eslintrc.* files are ESLint config files. You can put your ESLint project configuration into a config file. You can include built-in rules, how to apply them, plugins with custom rules, sharable configurations, files to apply rules to, and more.

The .eslintrc.json file imports the already configured ESLint configuration from @ssoltech/eslint-config-prettier.

.eslintrc.json file structure

.
├── .eslintrc.json
└── ...

Within your .eslintrc.json file:

{
  "extends": ["@ssoltech/eslint-config-prettier"],
  "parserOptions": {
    "project": "./tsconfig.json"
  }
}

When configuring .eslintrc.json, you must delete all existing .eslintrc.* files.

3) Configure Prettier

Prettier is a code formatter that transforms code into a defined coding style. As recommended in the ESLint guide, we use Prettier as our code formatter.

"We strongly recommend you do not use this rule or any other formatting linter rules. Use a separate dedicated formatter instead."

The .prettierrc.* files are Prettier config files. You can put your Prettier project configuration into a config file. You can include print width, use tabs, and tab width, and more.

The .prettierrc.js file imports the already configured Prettier configuration from @ssoltech/eslint-config-prettier.

.prettierrc.js file structure

.
├── .prettierrc.js
└── ...

Within your .prettierrc.js file:

module.exports = {
  ...require("@ssoltech/eslint-config-prettier/.prettierrc.json"),
};

When configuring .prettierrc.js, you must delete all existing .prettierrc.* files.

Restart the editor after changing the prettier config.

4) Install the VS Code plugin

You need to install ESLint, Prettier - Code formatter from the Extensions of VS Code.

Optional settings

Optional settings file structure

.
├── .vscode                   
│   ├── settings.json
│   └── extensions.json
├── .editorconfig        
├── .eslintignore                    
├── .prettierignore           
└── ...

1) Ignore file

You can instruct ESLint to ignore certain files and directories by creating a .eslintignore file in your project's root directory.

Example .eslintignore file:

/node_modules
/dist

You can instruct Prettier to ignore certain files and directories by creating a .prettierignore file in your project's root directory.

Example .prettierignore file:

/node_modules
/dist

2) EditorConfig

EditorConfig helps developers maintain the same coding style even when using different editors or IDEs. Prettier works as a code formatter in the project, and EditConfig changes the settings of the IDE.

EditorConfig has a single configuration file that can be read by all IDEs and code editors with some plugins/extensions.

Within your .editorconfig file:

root = true

[*]
indent_style = space
indent_size = 2
end_of_line = lf
charset = utf-8
trim_trailing_whitespace = true
insert_final_newline = true

[*.md]
trim_trailing_whitespace = false

To use it in VSCode, you need to install EditorConfig for VS Code from the Extensions of VS Code.

3) Visual Studio Code

A list of recommended extensions is defined in the .vscode/extensions.json file. Plugins defined as recommended extensions will ask the user to install them in VS Code when run.

Within your .vscode/extensions.json file:

{
  "recommendations": [
    "esbenp.prettier-vscode",
    "dbaeumer.vscode-eslint",
    "editorconfig.editorconfig"
  ]
}

The .vscode/settings.json file contains auto-formatting settings by the Prettier extension plugin when saving files. Skip this step if you do not want the auto format feature.

Within your .vscode/settings.json file:

{
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true
}

Troubleshooting

1) I get this error when running ESLint: "The file must be included in at least one of the projects provided"

This error occurs as a performance issue when eslint tries to linting all files, not just Typescript files. So, to solve this problem, you need to specify in your tsconfig.ts file which files you want to linting to.

Modify a tsconfig.json file

.
├── tsconfig.json
└── ...

Example tsconfig.json file:

{
  ...
+  "include": ["src/**/*.ts", "src/**/*.js", "test/**/*.ts"]
}

Check out the link below for other detailed TypeScript ESLint errors.

https://typescript-eslint.io/linting/troubleshooting/

Credits

Authored and maintained by SSOLTECH <[e-mail]>

License

Open source licensed as MIT.