@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/

Install

Install dependencies and set up configuration files:

npx @soleil-se/eslint-config@latest --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@latest --setup

Manually

1. Uninstall plugins

   Uninstall all old plugins with:

   npm remove eslint-config-airbnb-base eslint-plugin-import eslint-plugin-svelte

2. Update dependencies

   Update @soleil-se/eslint-config to version 6 and eslint to version 9:

   npm i @soleil-se/eslint-config@6 eslint@9 --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 script from '@soleil-se/eslint-config/script-module';

export default [
  ...script,
];

TypeScript

If you are using TypeScript in your app, you also need to install the following dependencies:

  npm i typescript-eslint eslint-import-resolver-typescript --save-dev

You also need to use the TypeScript configration instead of the default one:

eslint.config.js

 import config from '@soleil-se/eslint-config';
 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",
  "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