# @soleil-se/eslint-config ESLint configuration for Sitevision projects based on Airbnb’s JavaScript style guide. **ES2015+**\ If you encounter an error you don’t understand, you can check the style guide or search on ESLint’s website.\ ## Custom plugins This package also includes some custom ESLint plugins that are used in the configurations. * [eslint-plugin-import-naming](/packages/eslint-config/plugins/eslint-plugin-import-naming) - Enforce consistent naming for default imports from specified packages. ## Install Install dependencies and set up configuration files: ```sh npx @soleil-se/eslint-config@latest --setup ``` To install manually, install the following dependencies and create configuration files as described [below](#config). ```sh 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. ```sh npx @soleil-se/eslint-config@latest --setup ``` Manually** 1. Uninstall plugins Uninstall all old plugins with: ```sh 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: ```sh 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). ## Config ESLint primarily reads from `eslint.config.js` files in the project.\ ### Default **eslint.config.js** ```js import config from '@soleil-se/eslint-config'; export default [ ...config, ]; ``` ### Script modules Config for script modules and Rhino. **eslint.config.js** ```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: ```sh 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** ```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](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint) for Visual Studio Code. #### End of line Airbnb uses LF for EOL. Set this in [settings](https://code.visualstudio.com/docs/getstarted/settings) in Visual Studio Code.\ Change `\r\n` to `\n`.\ You also want to include a new line at the end of files. ```json "files.eol": "\n", "files.insertFinalNewline": true ``` #### Indentation Airbnb indents with two spaces. ```json "editor.tabSize": 2, "editor.insertSpaces": true ``` #### Autofix You can set it so that simple errors are automatically fixed under [settings](https://code.visualstudio.com/docs/getstarted/settings) in Visual Studio Code. ```json "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](https://code.visualstudio.com/docs/getstarted/settings). ```json "editor.rulers": [ 100 ] ``` #### Svelte To get support for Svelte, you need to add the following in [settings](https://code.visualstudio.com/docs/getstarted/settings). ```json "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: For example, if a standalone WebApp has its own configuration and plugins that are loaded. ```json "eslint.workingDirectories": ["./standalone_apps/MyApp"] ``` If you enable `{ "mode": "auto" }`, it will try to automatically find the correct configuration. ```json "eslint.workingDirectories": [{ "mode": "auto" }] ``` #### Complete config `Ctrl` + `Shift` + `P` and type settings and open `settings.json`. **settings.json** ```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.\ ## Svelte Install the [Svelte](https://marketplace.visualstudio.com/items?itemName=svelte.svelte-vscode) 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** ```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** ```json { "[svelte]": { "editor.formatOnSave": true, "editor.defaultFormatter": "svelte.svelte-vscode" }, } ``` You can also turn off formatting of scripts by adding the comment `` before the script tag if there are conflicts and problems. **App.svelte** ```svelte

{foo}

``` ## 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.