@soleil-se/eslint-config

ESLint configuration for Sitevision projects based on Airbnb’s JavaScript style guide.

ES2015+
https://github.com/airbnb/javascript

If you encounter an error you don’t understand, you can check the style guide or search on ESLint’s website.
https://eslint.org/docs/rules/

Custom plugins

This package also includes some custom ESLint plugins that are used in the configurations.

• eslint-plugin-import-naming - Enforce consistent naming for default imports from specified packages.

Install

Install dependencies and set up configuration files:

npx @soleil-se/eslint-config@7 setup

To install manually, install the following dependencies and create configuration files as described below.

npm i @soleil-se/eslint-config eslint --save-dev

Upgrade

The easiest way is to run the setup script to upgrade to the latest version.

npx @soleil-se/eslint-config@7 setup

Manually

1. Uninstall packages

   Uninstall all possible old packages with:

   npm remove @soleil-se/eslint-config eslint eslint-config-airbnb-base eslint-plugin-import eslint-plugin-svelte eslint-config-prettier eslint-plugin-prettier eslint-plugin-svelte3 eslint-import-resolver-typescript typescript-eslint

2. Install dependencies

   Install @soleil-se/eslint-config version 7 and eslint version 10:

   npm i @soleil-se/eslint-config@7 eslint@10 --save-dev

3. Remove old configuration

   Remove old configuration files.

   • .eslintrc.cjs
   • .eslintignore
   • .prettierrc.cjs
4. Create new configuration

   Create new configuration files as described below.

Config

ESLint primarily reads from eslint.config.js files in the project.
https://eslint.org/docs/user-guide/configuring#using-configuration-files-1

Default

eslint.config.js

import config from '@soleil-se/eslint-config';

export default [
  ...config,
];

Script modules

Config for script modules and Rhino.

eslint.config.js

import config from '@soleil-se/eslint-config/script-module';

export default [
  ...config,
];

TypeScript

Configuration for TypeScript apps:

eslint.config.js

import config from '@soleil-se/eslint-config/typescript';

export default [
  ...config,
];

Editors

The easiest way to get started with ESLint is to install it as an extension in your editor.

Visual Studio Code

Install ESLint for Visual Studio Code.

End of line

Airbnb uses LF for EOL. Set this in settings in Visual Studio Code.
Change \r\n to \n.
You also want to include a new line at the end of files.

"files.eol": "\n",
"files.insertFinalNewline": true

Indentation

Airbnb indents with two spaces.

"editor.tabSize": 2,
"editor.insertSpaces": true

Autofix

You can set it so that simple errors are automatically fixed under settings in Visual Studio Code.

"editor.codeActionsOnSave": {
  "source.fixAll.eslint": true
}

Max length

Airbnb advocates a maximum line length of 100 characters.
You can set it to show a line in Visual Studio Code to visualize this. Do this in settings.

"editor.rulers": [
  100
]

Svelte

To get support for Svelte, you need to add the following in settings.

"eslint.validate": [
  "javascript",
  "javascriptreact",
  "svelte"
]

Config in subdirectory

If you want to run ESLint in a subdirectory that has its own installation and configuration of eslint, you need to either add the directory path to the eslint.workingDirectories setting or change to { "mode": "auto" }.
Read more here: https://github.com/microsoft/vscode-eslint#settings-options

For example, if a standalone WebApp has its own configuration and plugins that are loaded.

"eslint.workingDirectories": ["./standalone_apps/MyApp"]

If you enable { "mode": "auto" }, it will try to automatically find the correct configuration.

"eslint.workingDirectories": [{ "mode": "auto" }]

Complete config

Ctrl + Shift + P and type settings and open settings.json.

settings.json

"files.eol": "\n",
"files.insertFinalNewline": true,
"editor.codeActionsOnSave": {
  "source.fixAll.eslint": "explicit"
},
"editor.rulers": [
  100
],
"editor.formatOnSave": false,
"editor.tabSize": 2,
"editor.insertSpaces": true,
"eslint.validate": ["javascript", "javascriptreact", "typescript", "typescriptreact", "svelte"],
"[svelte]": {
  "editor.formatOnSave": true
},
"eslint.workingDirectories": [{ "mode": "auto" }],

CLI

If you want to run ESLint in your terminal.
https://eslint.org/docs/user-guide/command-line-interface

Svelte

Install the Svelte extension for Visual Studio Code.

Code formatting

Formatting code in Svelte uses Prettier, so you need to add settings for it so HTML can be formatted. Unfortunately, this also affects JavaScript, so some rules you are used to have been turned off to avoid conflicts with Prettier. Create a file called prettier.config.js in the root of the app or project.

prettier.config.js

export { default } from '@soleil-se/eslint-config/prettier';

To format automatically, you need to add the following to settings.json in Visual Studio Code.

settings.json

{
  "[svelte]": {
    "editor.formatOnSave": true,
    "editor.defaultFormatter": "svelte.svelte-vscode"
  },
}

You can also turn off formatting of scripts by adding the comment <!-- prettier-ignore --> before the script tag if there are conflicts and problems.

App.svelte

<!-- prettier-ignore -->
<script>
  const foo = 'bar';
</script>

<p>{foo}</p>

Git

If you have problems with line breaks in git, you may need to do the following:

1. Push up / stash all changes.
2. Create a file in the root of the project named .gitattributes.
3. Specify the content in the file: * text=auto eol=lf.
4. Run: git rm --cached -r .
5. Run: git reset --hard.
6. Push up the file.

https://stackoverflow.com/questions/9976986/force-lf-eol-in-git-repo-and-working-copy/34810209#34810209