chore(project): changing linting rules

- lint-staged checks changed (tsc check + auto fixing)
- fixing linting in files
- GitHub action to control lintig

.eslintignore

@@ -0,0 +1,8 @@
+# Modules
+node_modules/
+
+# Test
+coverage/
+
+# Build output
+build/

.eslintrc.js

@@ -29,13 +29,13 @@ module.exports = {
   env: {
     // Browser conf
     browser: true,
-    es6    : true,
+    es6: true,
   },
 
-  rules    : {
+  rules: {
     // Prevent development/debugging statements
-    'no-console' : ['error', { allow: ['warn', 'error', 'info', 'debug'] }],
-    'no-alert'   : 'error',
+    'no-console': ['error', { allow: ['warn', 'error', 'info', 'debug'] }],
+    'no-alert': 'error',
     'no-debugger': 'error',
 
     // Prevent usage of confusing globals
@@ -48,25 +48,25 @@ module.exports = {
     'import/order': [
       'warn',
       {
-        groups            : ['builtin', 'external', 'parent', 'sibling', 'index'],
-        pathGroups        : [
+        groups: ['builtin', 'external', 'parent', 'sibling', 'index'],
+        pathGroups: [
           // Sort absolute root imports before parent imports
           {
-            pattern : '/**',
-            group   : 'parent',
+            pattern: '/**',
+            group: 'parent',
             position: 'before',
           },
         ],
         'newlines-between': 'always',
       },
     ],
     // Not needed in React 17
-    'react/react-in-jsx-scope': 'off'
+    'react/react-in-jsx-scope': 'off',
   },
   overrides: [
     {
       files: ['*.js'],
-      env  : {
+      env: {
         // We may still use CJS in .js files (eg. local scripts)
         commonjs: true,
       },
@@ -83,27 +83,24 @@ module.exports = {
         '@typescript-eslint/no-implicit-any-catch': 'error',
 
         // These are handled by TS
-        '@typescript-eslint/no-explicit-any'               : [
-          'warn',
-          { ignoreRestArgs: true },
-        ],
+        '@typescript-eslint/no-explicit-any': ['warn', { ignoreRestArgs: true }],
         '@typescript-eslint/explicit-module-boundary-types': 'off',
-        '@typescript-eslint/no-inferrable-types'           : 'off',
-        '@typescript-eslint/ban-ts-comment'                : 'off',
-        '@typescript-eslint/no-unused-vars'                : 'off',
-        'import/no-unresolved'                             : 'off',
+        '@typescript-eslint/no-inferrable-types': 'off',
+        '@typescript-eslint/ban-ts-comment': 'off',
+        '@typescript-eslint/no-unused-vars': 'off',
+        'import/no-unresolved': 'off',
       },
     },
     {
-      files  : ['*.jsx', '*.tsx'],
+      files: ['*.jsx', '*.tsx'],
       plugins: [
         // Enable linting React code
         'react',
         'react-hooks',
       ],
-      rules  : {
+      rules: {
         // Help with Hooks syntax
-        'react-hooks/rules-of-hooks' : 'error',
+        'react-hooks/rules-of-hooks': 'error',
         'react-hooks/exhaustive-deps': 'error',
 
         // Handled by Typescript
@@ -115,9 +112,9 @@ module.exports = {
     },
   ],
 
-  settings     : {
+  settings: {
     react: {
-      pragma : 'React',
+      pragma: 'React',
       version: '17',
     },
   },

.github/workflows/linting.yml

@@ -0,0 +1,24 @@
+name: Linting
+
+on: [pull_request]
+
+jobs:
+  lint:
+    runs-on: macos-latest
+
+    strategy:
+      matrix:
+        node-version: [14.x]
+
+    steps:
+      - uses: actions/checkout@v1
+      - name: Use Node.js ${{ matrix.node-version }}
+        uses: actions/setup-node@v1
+        with:
+          node-version: ${{ matrix.node-version }}
+      - name: yarn install, lint
+        run: |
+          yarn install
+          yarn lint
+        env:
+          CI: true

.stylelintignore

@@ -0,0 +1,8 @@
+# Modules
+node_modules/
+
+# Test
+coverage/
+
+# Build output
+build/

CONTRIBUTING.md

@@ -96,9 +96,9 @@ While far from comprehensive, following these guidelines will get the easy stuff
 
 1. This project uses vite to build and compile. **Code produced by the build must work across all supported browsers and devices - modern Chrome, FF, Safari, and Edge**
 2. Ensure that your code matches the formatting of the codebase by running ```yarn format```
-3. Ensure that your code follows our styleguide by passing our ESLint rules
+3. Ensure that your code follows our styleguide by passing our ESLint, Stylelint and TypeScript rules
    - You can run lint analysis by running ```yarn lint```
-   - You can fix lint errors by running ```yarn lint --fix```
+   - You can fix lint errors by running ```yarn format```
 4. Ensure that your code passes lighthouse analysis by running ```npx lhci autorun```
 5. Do your best to match our naming conventions and conform to the style of the code around you
 6. If you have a large or messy commit history, please rebase & squash your commit history

docs/developer-guidelines.md

@@ -4,9 +4,8 @@
 - Run the server through `yarn start`
 - Run the tests through `yarn test`
 - Run the e2e tests through `yarn codecept:mobile` and `yarn codecept:desktop`
-- Format the code through `yarn format`
-- Lint through `yarn lint`
-- Lint and fix through `yarn lint --fix`
+- Format the code through `yarn format` (or automatically do it via git hooks)
+- Lint through `yarn lint` (eslint, prettier, stylelint and tsc checks)
 - The JW organization requires personal access tokens for all of their repositories. In order to create a branch or pull request you'll need to [Generate a Personal Access Token](https://github.com/settings/tokens) and then [store it in your git config](https://stackoverflow.com/questions/46645843/where-to-store-my-git-personal-access-token/67360592). (For token permissions, `repo` should be sufficient.) 
 
 ## Versioning and Changelog

i18next-parser.config.js

@@ -14,11 +14,11 @@ module.exports = {
     ts: ['JavascriptLexer'],
     jsx: ['JsxLexer'],
     tsx: ['JsxLexer'],
-    default: ['JavascriptLexer']
+    default: ['JavascriptLexer'],
   },
   lineEnding: 'auto',
   locales: ['en_US', 'nl_NL'],
   namespaceSeparator: ':',
   output: 'src/i18n/locales/$LOCALE/$NAMESPACE.json',
   sort: true,
-}
+};

lint-staged.config.js

@@ -0,0 +1,5 @@
+module.exports = {
+  '{**/*,*}.{js,ts,jsx,tsx}': ['eslint --fix', 'prettier --write'],
+  'src/**/*.scss': ['stylelint --fix'],
+  '{**/*,*}.{ts,tsx}': [() => 'tsc --pretty --noEmit'],
+};

package.json

@@ -12,12 +12,19 @@
     "test": "TZ=UTC vitest run",
     "test-watch": "TZ=UTC vitest",
     "test-coverage": "TZ=UTC vitest run --coverage",
+    "test-commit": "TZ=UTC vitest run --changed HEAD~1 --coverage",
     "i18next": "i18next src/{components,containers,screens}/**/{**/,/}*.tsx && node ./scripts/i18next/generate.js",
-    "format": "prettier --write \"{**/*,*}.{js,ts,jsx,tsx}\"",
-    "lint": "prettier --check \"{**/*,*}.{js,ts,jsx,tsx}\" && eslint \"{**/*,*}.{js,ts,jsx,tsx}\"",
-    "lint:styles": "stylelint \"src/**/*.scss\"",
+    "format": "run-s -c format:*",
+    "format:eslint": "eslint \"{**/*,*}.{js,ts,jsx,tsx}\" --fix",
+    "format:prettier": "prettier --write \"{**/*,*}.{js,ts,jsx,tsx}\"",
+    "format:stylelint": "stylelint --fix '**/*.{css,scss}'",
+    "lint": "run-s -c lint:*",
+    "lint:eslint": "eslint \"{**/*,*}.{js,ts,jsx,tsx}\"",
+    "lint:prettier": "prettier --check \"{**/*,*}.{js,ts,jsx,tsx}\"",
+    "lint:ts": "tsc --pretty --noEmit -p .",
+    "lint:stylelint": "stylelint '**/*.{css,scss}'",
     "commit-msg": "commitlint --edit $1",
-    "pre-commit": "depcheck && lint-staged && TZ=UTC yarn test --coverage",
+    "pre-commit": "depcheck && lint-staged && TZ=UTC yarn test-commit",
     "codecept:mobile": "cd test-e2e && codeceptjs -c codecept.mobile.js run --steps",
     "codecept:desktop": "cd test-e2e && codeceptjs -c codecept.desktop.js run --steps",
     "deploy:github": "node ./scripts/deploy-github.js"
@@ -30,6 +37,7 @@
     "jwt-decode": "^3.1.2",
     "lodash.merge": "^4.6.2",
     "memoize-one": "^5.2.1",
+    "npm-run-all": "^4.1.5",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-helmet": "^6.1.0",
@@ -99,15 +107,6 @@
   "peerDependencies": {
     "react-router": "^5.2.1"
   },
-  "lint-staged": {
-    "{**/*,*}.{js,ts,jsx,tsx}": [
-      "prettier --check",
-      "eslint"
-    ],
-    "src/**/*.scss": [
-      "stylelint"
-    ]
-  },
   "optionalDependencies": {
     "gh-pages": "^3.2.3",
     "lighthouse": "^8.6.0"
@@ -117,4 +116,4 @@
     "glob-parent": "^5.1.2",
     "codeceptjs/**/ansi-regex": "^4.1.1"
   }
-}
+}

postcss.config.js

@@ -1,7 +1,7 @@
 const stylelintConfig = require('./stylelint.config.js');
 
 module.exports = {
-  syntax : 'postcss-scss',
+  syntax: 'postcss-scss',
   plugins: [
     require('postcss-import')({
       plugins: [