Skip to content

Commit 48f89e6

Browse files
vejolvejol
committed
Update ESLint section
1 parent 3cadd4a commit 48f89e6

File tree

2 files changed

+111
-150
lines changed

2 files changed

+111
-150
lines changed

‎src/content/5/en/part5b.md‎

Lines changed: 55 additions & 75 deletions
Original file line numberDiff line numberDiff line change
@@ -636,68 +636,71 @@ Show the button for deleting a blog post only if the blog post was added by the
636636

637637
In part 3 we configured the [ESlint](/en/part3/validation_and_es_lint#lint) code style tool to the backend. Let's take ESlint to use in the frontend as well.
638638

639-
Vite has installed ESlint to the project by default, so all that's left for us to do is define our desired configuration in the <i>.eslintrc.cjs</i> file.
639+
Vite has installed ESlint to the project by default, so all that's left for us to do is define our desired configuration in the <i>eslint.config.js</i> file.
640640

641-
Let's create a <i>.eslintrc.cjs</i> file with the following contents:
641+
Let's create a <i>eslint.config.js</i> file with the following contents:
642642

643643
```js
644-
module.exports = {
645-
root: true,
646-
env: {
647-
browser: true,
648-
es2020: true,
649-
},
650-
extends: [
651-
'eslint:recommended',
652-
'plugin:react/recommended',
653-
'plugin:react/jsx-runtime',
654-
'plugin:react-hooks/recommended',
655-
],
656-
ignorePatterns: ['dist', '.eslintrc.cjs'],
657-
parserOptions: { ecmaVersion: 'latest', sourceType: 'module' },
658-
settings: { react: { version: '18.2' } },
659-
plugins: ['react-refresh'],
660-
rules: {
661-
"indent": [
662-
"error",
663-
2
664-
],
665-
"linebreak-style": [
666-
"error",
667-
"unix"
668-
],
669-
"quotes": [
670-
"error",
671-
"single"
672-
],
673-
"semi": [
674-
"error",
675-
"never"
676-
],
677-
"eqeqeq": "error",
678-
"no-trailing-spaces": "error",
679-
"object-curly-spacing": [
680-
"error", "always"
681-
],
682-
"arrow-spacing": [
683-
"error", { "before": true, "after": true }
684-
],
685-
"no-console": 0,
686-
"react/react-in-jsx-scope": "off",
687-
"react/prop-types": 0,
688-
"no-unused-vars": 0
689-
},
690-
}
644+
import js from '@eslint/js'
645+
import globals from 'globals'
646+
import reactHooks from 'eslint-plugin-react-hooks'
647+
import reactRefresh from 'eslint-plugin-react-refresh'
648+
649+
export default [
650+
{ ignores: ['dist'] },
651+
{
652+
files: ['**/*.{js,jsx}'],
653+
languageOptions: {
654+
ecmaVersion: 2020,
655+
globals: globals.browser,
656+
parserOptions: {
657+
ecmaVersion: 'latest',
658+
ecmaFeatures: { jsx: true },
659+
sourceType: 'module'
660+
}
661+
},
662+
plugins: {
663+
'react-hooks': reactHooks,
664+
'react-refresh': reactRefresh
665+
},
666+
rules: {
667+
...js.configs.recommended.rules,
668+
...reactHooks.configs.recommended.rules,
669+
'no-unused-vars': ['error', { varsIgnorePattern: '^[A-Z_]' }],
670+
'react-refresh/only-export-components': [
671+
'warn',
672+
{ allowConstantExport: true }
673+
// highlight-start
674+
],
675+
indent: ['error', 2],
676+
'linebreak-style': ['error', 'unix'],
677+
quotes: ['error', 'single'],
678+
semi: ['error', 'never'],
679+
eqeqeq: 'error',
680+
'no-trailing-spaces': 'error',
681+
'object-curly-spacing': ['error', 'always'],
682+
'arrow-spacing': ['error', { before: true, after: true }],
683+
'no-console': 'off'
684+
//highlight-end
685+
}
686+
}
687+
]
691688
```
692689

693-
NOTE: If you are using Visual Studio Code together with ESLint plugin, you might need to add a workspace setting for it to work. If you are seeing ```Failed to load plugin react: Cannot find module 'eslint-plugin-react'``` additional configuration is needed. Adding the line ```"eslint.workingDirectories": [{ "mode": "auto" }]``` to settings.json in the workspace seems to work. See [here](https://github.com/microsoft/vscode-eslint/issues/880#issuecomment-578052807) for more information.
690+
NOTE: If you are using Visual Studio Code together with ESLint plugin, you might need to add a workspace setting for it to work. If you are seeing <i>Failed to load plugin react: Cannot find module 'eslint-plugin-react'</i> additional configuration is needed. Adding the following line to settings.json may help:
691+
692+
```js
693+
"eslint.workingDirectories": [{ "mode": "auto" }]
694+
```
695+
696+
See [here](https://github.com/microsoft/vscode-eslint/issues/880#issuecomment-578052807) for more information.
694697

695698
Let's create [.eslintignore](https://eslint.org/docs/latest/use/configure/ignore#the-eslintignore-file) file with the following contents to the repository root
696699

697700
```bash
698701
node_modules
699702
dist
700-
.eslintrc.cjs
703+
eslint.config.js
701704
vite.config.js
702705
```
703706

@@ -711,29 +714,6 @@ npm run lint
711714

712715
or using the editor's Eslint plugin.
713716

714-
Component _Togglable_ causes a nasty-looking warning <i>Component definition is missing display name</i>:
715-
716-
![vscode showing component definition error](../../images/5/25x.png)
717-
718-
The react-devtools also reveals that the component does not have a name:
719-
720-
![react devtools showing forwardRef as anonymous](../../images/5/26ea.png)
721-
722-
Fortunately, this is easy to fix
723-
724-
```js
725-
import { useState, useImperativeHandle } from 'react'
726-
import PropTypes from 'prop-types'
727-
728-
const Togglable = React.forwardRef((props, ref) => {
729-
// ...
730-
})
731-
732-
Togglable.displayName = 'Togglable' // highlight-line
733-
734-
export default Togglable
735-
```
736-
737717
You can find the code for our current application in its entirety in the <i>part5-7</i> branch of [this GitHub repository](https://github.com/fullstack-hy2020/part2-notes-frontend/tree/part5-7).
738718

739719
</div>
@@ -746,6 +726,6 @@ You can find the code for our current application in its entirety in the <i>part
746726

747727
Add ESlint to the project. Define the configuration according to your liking. Fix all of the linter errors.
748728

749-
Vite has installed ESlint to the project by default, so all that's left for you to do is define your desired configuration in the <i>.eslintrc.cjs</i> file.
729+
Vite has installed ESlint to the project by default, so all that's left for you to do is define your desired configuration in the <i>eslint.config.js</i> file.
750730

751731
</div>

‎src/content/5/fi/osa5b.md‎

Lines changed: 56 additions & 75 deletions
Original file line numberDiff line numberDiff line change
@@ -634,68 +634,72 @@ Näytä poistonappi ainoastaan jos kyseessä on kirjautuneen käyttäjän lisä
634634

635635
Konfiguroimme osassa 3 koodin tyylistä huolehtivan [ESLintin](/osa3/validointi_ja_es_lint) backendiin. Otetaan nyt ESLint käyttöön myös frontendissa.
636636

637-
Vite on asentanut projektille ESLintin valmiiksi, joten ei tarvitse muuta kuin muokata tiedostossa <i>.eslintrc.cjs</i> oleva konfiguraatio halutun kaltaiseksi.
637+
Vite on asentanut projektille ESLintin valmiiksi, joten ei tarvitse muuta kuin muokata tiedostossa <i>eslint.config.js</i> oleva konfiguraatio halutun kaltaiseksi.
638638

639639

640-
Muutetaan tiedoston <i>.eslintrc.cjs</i> sisältöä seuraavasti:
640+
Muutetaan tiedoston <i>eslint.config.js</i> sisältöä seuraavasti:
641641

642642
```js
643-
module.exports = {
644-
root: true,
645-
env: {
646-
browser: true,
647-
es2020: true,
648-
},
649-
extends: [
650-
'eslint:recommended',
651-
'plugin:react/recommended',
652-
'plugin:react/jsx-runtime',
653-
'plugin:react-hooks/recommended',
654-
],
655-
ignorePatterns: ['dist', '.eslintrc.cjs'],
656-
parserOptions: { ecmaVersion: 'latest', sourceType: 'module' },
657-
settings: { react: { version: '18.2' } },
658-
plugins: ['react-refresh'],
659-
rules: {
660-
"indent": [
661-
"error",
662-
2
663-
],
664-
"linebreak-style": [
665-
"error",
666-
"unix"
667-
],
668-
"quotes": [
669-
"error",
670-
"single"
671-
],
672-
"semi": [
673-
"error",
674-
"never"
675-
],
676-
"eqeqeq": "error",
677-
"no-trailing-spaces": "error",
678-
"object-curly-spacing": [
679-
"error", "always"
680-
],
681-
"arrow-spacing": [
682-
"error", { "before": true, "after": true }
683-
],
684-
"no-console": 0,
685-
"react/prop-types": 0,
686-
"react/react-in-jsx-scope": "off",
687-
"react/prop-types": 0,
688-
"no-unused-vars": 0
689-
},
690-
}
643+
import js from '@eslint/js'
644+
import globals from 'globals'
645+
import reactHooks from 'eslint-plugin-react-hooks'
646+
import reactRefresh from 'eslint-plugin-react-refresh'
647+
648+
export default [
649+
{ ignores: ['dist'] },
650+
{
651+
files: ['**/*.{js,jsx}'],
652+
languageOptions: {
653+
ecmaVersion: 2020,
654+
globals: globals.browser,
655+
parserOptions: {
656+
ecmaVersion: 'latest',
657+
ecmaFeatures: { jsx: true },
658+
sourceType: 'module'
659+
}
660+
},
661+
plugins: {
662+
'react-hooks': reactHooks,
663+
'react-refresh': reactRefresh
664+
},
665+
rules: {
666+
...js.configs.recommended.rules,
667+
...reactHooks.configs.recommended.rules,
668+
'no-unused-vars': ['error', { varsIgnorePattern: '^[A-Z_]' }],
669+
'react-refresh/only-export-components': [
670+
'warn',
671+
{ allowConstantExport: true }
672+
// highlight-start
673+
],
674+
indent: ['error', 2],
675+
'linebreak-style': ['error', 'unix'],
676+
quotes: ['error', 'single'],
677+
semi: ['error', 'never'],
678+
eqeqeq: 'error',
679+
'no-trailing-spaces': 'error',
680+
'object-curly-spacing': ['error', 'always'],
681+
'arrow-spacing': ['error', { before: true, after: true }],
682+
'no-console': 'off'
683+
//highlight-end
684+
}
685+
}
686+
]
691687
```
692688

689+
HUOM: Jos käytät Visual Studio Codea yhdessä ESLint-laajennuksen kanssa, saatat joutua muokkaamaan VS Coden asetuksia, jotta linttaus toimii oikein. Jos näet virheen <i>Failed to load plugin react: Cannot find module 'eslint-plugin-react'</i>, tarvitaan lisäkonfiguraatiota. Seuraavan rivin lisääminen <i>settings.json</i>-tiedostoon voi auttaa:
690+
691+
```js
692+
"eslint.workingDirectories": [{ "mode": "auto" }]
693+
```
694+
695+
Katso lisätietoja [täältä](https://github.com/microsoft/vscode-eslint/issues/880#issuecomment-578052807).
696+
693697
Tehdään projektin juureen tiedosto [.eslintignore](https://eslint.org/docs/user-guide/configuring#ignoring-files-and-directories) ja sille seuraava sisältö:
694698

695699
```bash
696700
node_modules
697701
dist
698-
.eslintrc.cjs
702+
eslint.config.js
699703
vite.config.js
700704
```
701705

@@ -709,29 +713,6 @@ npm run lint
709713

710714
tai editorin Eslint-pluginia hyväksikäyttäen.
711715

712-
Komponentti _Togglable_ aiheuttaa ikävän näköisen varoituksen <i>Component definition is missing display name</i>:
713-
714-
![VS codessa näkyy ESLint-varoitus "Component definition is missing display name"](../../images/5/25x.png)
715-
716-
Komponentin "nimettömyys" käy ilmi myös React Development Toolsilla:
717-
718-
![React Development Tool paljastaa, että komponentin nimi on "Anonymous"](../../images/5/26ea.png)
719-
720-
Korjaus on onneksi hyvin helppo tehdä:
721-
722-
```js
723-
import { useState, useImperativeHandle } from 'react'
724-
import PropTypes from 'prop-types'
725-
726-
const Togglable = React.forwardRef((props, ref) => {
727-
// ...
728-
})
729-
730-
Togglable.displayName = 'Togglable' // highlight-line
731-
732-
export default Togglable
733-
```
734-
735716
Sovelluksen tämänhetkinen koodi on kokonaisuudessaan [GitHubissa](https://github.com/fullstack-hy2020/part2-notes-frontend/tree/part5-7), branchissa <i>part5-7</i>.
736717

737718
</div>
@@ -744,6 +725,6 @@ Sovelluksen tämänhetkinen koodi on kokonaisuudessaan [GitHubissa](https://gith
744725

745726
Ota projektiin käyttöön ESLint. Määrittele haluamasi kaltainen konfiguraatio. Korjaa kaikki lint-virheet.
746727

747-
Vite on asentanut projektille ESLintin valmiiksi, joten ei tarvita muuta kun sopiva konfiguraatio tiedostoon <i>.eslintrc.cjs</i>.
728+
Vite on asentanut projektille ESLintin valmiiksi, joten ei tarvita muuta kun sopiva konfiguraatio tiedostoon <i>eslint.config.js</i>.
748729

749730
</div>

0 commit comments

Comments
 (0)