ESLint-Config-SLCO   :page_with_curl:

:coffee: NPMJS URL: ESLint-config-slco

Eslint-config-slco is an npm package with my eslint enabled and prettier settings.
Easy to use and easily extended. :beer:

I. Install Package

1  npm i eslint-config-slco@latest

II. Extending eslint config in one of two ways:

• creating a new .eslintrc file in root of the project
• creating a new or adding to an exisitng eslintConfig object in package.json

1 {
2    "extends": ["slco"] // with .eslintrc file
3 }
4
5 // or package.json eslintConfig object
6 {
7  "eslintConfig": {
8    "extends": ["eslint-config-slco"] //add last
9    }
10 }

III. Add linting & peerdeps scripts

• In package.json file:

1 {
2  "scripts": {
3    "slco": "npx install-peerdeps --dev eslint-config-slco",
4    "lint": "eslint .",
5    "lint:fix": "eslint . --fix"
6  }
7}

• Before running slco, check if the script is available via npm:

1 npm run-script  // it shows list of avail scripts. If so type:
2 npm run slco

 ..otherwise type:

1 npx install-peerdeps --dev eslint-config-slco

When correctly installed, it shows a SUCCESS message.

IV. To overwrite eslint or prettier settings:

• Do so inside of rules for eslint and under prettier/prettier for prettier

1  // example  
2 {
3  "extends": [
4    "slco" // (last)
5  ],
6  "rules": { // ESLINT rules
7    "no-console": 2, // overwrites eslint 1-warning with 2-error
8    
9    "prettier/prettier": [ // PRETTIER rules
10      "warn",
11      {
12        "trailingComma": "es5",
13        "singleQuote": true,
14        "printWidth": 200, // overwrites 70 with 200
15      }
16    ]
17  }
18 }

To have IDE lint files:

WebStorm :book:

Enable Node in Webstorm

Set ESlint

Fixing Errors

Non ESlint errors

Adding ESLint error to Rules in Package.json

Using VSCode :book:

• In VSCode settings or
• Inside a new .vscode/settings.json file

1 {
2    "editor.codeActionsOnSave": {
3        "source.fixAll.eslint": true
4    }
5 }

REFERENCE FILES I:

1  // REFERENCE PURPOSES I: REACT & JEST
2
3  // package.json
4  "dependencies": {
5    ...
6    react-test-renderer ^18.2.0         
7    @testing-library/jest-dom ^5.16.5       
8    @testing-library/react ^13.4.0      
9    @testing-library/user-event ^13.5.0      
10    jest ^29.3.1      
11    jest-environment-jsdom ^29.3.1     
12  }
13
14  scripts: {
15    ...
16    "test": "jest --watchAll"
17  }
18
19  // babel.config.js
20  module.exports
21  = {
22  presets: [
23    '@babel/preset-env',
24    [
25      '@babel/preset-react',
26      {
27        runtime: 'automatic'
28      }
29    ]
30  ]
31}
32
33// jest.config.js
34module.exports = {
35  moduleFileExtensions: [
36    'js',
37    'jsx'
38  ],
39  modulePathIgnorePatterns: [
40    '<rootDir>/node_modules/'
41  ],
42  moduleNameMapper: {
43    '\\.(css|less)$': '<rootDir>/src/app.css',
44    // Support import ~
45    '^~(.*)': '<rootDir>/node_modules/$1'
46  },
47  setupFilesAfterEnv: [
48    '<rootDir>/src/setupTests.js'
49  ],
50  testEnvironment: 'jsdom'
51}
52
53// @jest-environment jsdom //  or per file
54

REFERENCE FILES II

1  // REFERENCE PURPOSES II
2  // Adding Cypress to above React/Jest config
3
4  // package.json
5  "dependencies": {
6    ...
7    react-test-renderer ^18.2.0         
8    @testing-library/jest-dom ^5.16.5      
9    @testing-library/react ^13.4.0
10    @testing-library/user-event  ^13.5.0
11    jest ^29.3.1
12    jest-environment-jsdom ^29.3.1,
13    ...,
14    "@testing-library/jest-dom": "^5.16.5"       
15    "@testing-library/react": "^13.4.0"       
16    "@testing-library/user-event": "^13.5.0"      
17  }
18
19  scripts: {
20    ...
21    "test": "jest --watchAll",
22    "cypress:open": "./node_modules/.bin/cypress open",
23    "cypress:run": "./node_modules/.bin/cypress run",
24    "cybookshop": "npm run cypress:open --record --spec 'cypress/e2e/bookshop.spec.cy.js",
25    "slco": "npx install-peerdeps --dev eslint-config-slco",
26    "lint": "eslint .",
27    "lint:fix": "eslint . --fix",
28    },
29    "eslintConfig": {
30    "extends": [
31      "react-app",
32      "react-app/jest",
33      "plugin:cypress/recommended",
34      "eslint-config-slco"
35    ],
36    "rules": {
37      "jest/valid-expect": 0,
38      "react/prop-types": 0,
39      "cypress/no-unnecessary-waiting": 0,
40      "testing-library/await-async-utils": 0
41    }
42  },
43  
44  ...
45  ...
46
47// babel.config.js
48module.exports= {
49    presets: [
50        '@babel/preset-env',
51    [
52        '@babel/preset-react',
53    {
54        runtime: 'automatic'
55    }
56    ]
57  ]
58}
59
60    // cypress.config.js
61    const { defineConfig } = require('cypress')
62    require('dotenv').config()
63    
64    module.exports = defineConfig({
65      e2e: {
66        baseUrl: process.env.REACT_APP_BASE_URL,
67        env: {
68          development: process.env.REACT_APP_DEV,
69          booksApi: process.env.REACT_APP_BASE_API, // ..8080/books
70        },
71        pageLoadTimeout: process.env.REACT_APP_PAGE_LOAD_TIMEOUT,
72        watchForFileChanges: false,
73    
74        defaultCommandTimeout: 8000,
75        fileServerFolder: process.env.REACT_APP_SERVER_FOLDER, // stubServer
76        setupNodeEvents(on, config) {
77          // node evts
78          console.log('\n\n -| config --> ', config, ' ..l__l__\n')
79        },
80      },
81    })
82
83
84  // jest.config.js
85  module.exports = {
86     moduleFileExtensions: [
87        'js',
88        'jsx'
89     ],
90     modulePathIgnorePatterns: [
91        '<rootDir>/node_modules/'
92     ],
93     moduleNameMapper: {
94        '\\.(css|less)$': '<rootDir>/src/app.css',
95        // Support import ~
96        '^~(.*)': '<rootDir>/node_modules/$1'
97     },
98     setupFilesAfterEnv: [
99        '<rootDir>/src/setupTests.js'
100     ],
101     testEnvironment: 'jsdom'
102  }
103    
104 // @jest-environment jsdom //  or per file
105