Improving maintainability: ESLint and Prettier (#193)

* Removed unused fields from `package.json`: `main` and `author` from `storybook-builder-vite-parent` package

* Moved Prettier config from `package.json` to `.prettierrc` file

* Removed `indent_style`, `indent_size` and `insert_final_newline` from `.editorconfig`

* Using 2 spaces indent for `package.json` file

* Setup `engines.node` version to be greater or equal of current LTS version

* Setup two spaces indent for `*.json` files in the `.editorconfig`

* Created `.eslintignore` file

* Installed ESLint with plugins as dev dependencies:

* `cross-env`;
* `eslint`;
* `eslint-config-prettier`;
* `eslint-plugin-only-warn`;
* `eslint-plugin-prettier`;
* `eslint-plugin-storybook`.

* Created ESLint config in the `.eslintrc.js` file

* Set max line length to 120

* Using ESlint for linting. Renamed scripts: from `lint` to `lint-ci`, from `format` to `lint`.

Running `lint` and `lint-ci` scripts in production mode, for getting `console` and `debugger` warnings.

* Removed `cross-env` package and usages

* Removed `NODE_ENV=production` from `lint*` scripts
* Setup `lint-ci` for future usage in GitHub Actions.

Added `--max-warnings=0` argument for returning error with ESLint `only-warn` plugin.

* Installed TypeScript and ESLint dev dependencies:

* `@types/node` for LTS version;
* `@typescript-eslint/eslint-plugin`;
* `@typescript-eslint/parser`;
* `typescript`.

* Configure TypeScript ESLint parser and plugin

* Added `*.ts` and `*.tsx` file patterns to `lint*` scripts

* Fix: disable `no-unused-vars` ESLint rule for TypeScript files

* Ignoring comments for the `max-len` ESLint rule

* Enabled `no-console` and `no-debugger` warnings in development mode

* Removed `plugin:prettier/recommended` and put ESLint config `prettier` to `extends` array

* Updated `package.json`: run Prettier before ESLint

* Removed `eslint-plugin-prettier` from `package.json`

* Updated `prettier` package

.editorconfig

@@ -1,8 +1,12 @@
 root=true
 
 [*]
-indent_style = space
-indent_size = 4
 charset = utf-8
+max_line_length = 120
+ij_visual_guides = 120
 end_of_line = lf
-insert_final_newline = true
+
+# We are not running ESLint for JSON files, but we need to maintain the same style
+[*.json]
+indent_style = space
+indent_size = 2

.eslintignore

@@ -0,0 +1,3 @@
+.github
+.yarn
+storybook-static

.eslintrc.js

@@ -0,0 +1,32 @@
+module.exports = {
+  root: true,
+  env: {
+    node: true,
+  },
+  parser: '@typescript-eslint/parser',
+  parserOptions: {
+    ecmaVersion: 2021,
+  },
+  plugins: ['@typescript-eslint', 'only-warn'],
+  extends: [
+    'eslint:recommended',
+    'plugin:@typescript-eslint/eslint-recommended',
+    'plugin:storybook/recommended',
+    'prettier',
+  ],
+  rules: {
+    // Set line length to 120
+    'max-len': ['error', { code: 120, ignoreComments: true }],
+    // Ignore arguments starting from an underscore `_`
+    '@typescript-eslint/no-unused-vars': ['error', { argsIgnorePattern: '^_', varsIgnorePattern: '^_' }],
+  },
+  overrides: [
+    // Fix: disable `no-unused-vars` for TypeScript files
+    {
+      files: '**/*.ts',
+      rules: {
+        'no-unused-vars': 'off',
+      },
+    },
+  ],
+};

.nvmrc

@@ -1 +1 @@
-v15.14.0
+lts/*

.prettierrc

@@ -0,0 +1,3 @@
+{
+  "singleQuote": true
+}

package.json

@@ -1,25 +1,35 @@
 {
-    "name": "storybook-builder-vite-parent",
-    "version": "0.1.13",
-    "description": "An experimental plugin to run and build Storybooks with Vite",
-    "main": "index.js",
-    "author": "",
-    "license": "MIT",
-    "scripts": {
-        "lint": "prettier --check .",
-        "format": "prettier --write ."
-    },
-    "workspaces": [
-        "packages/example-react",
-        "packages/example-svelte",
-        "packages/example-vue",
-        "packages/example-workspaces",
-        "packages/storybook-builder-vite"
-    ],
-    "prettier": {
-        "singleQuote": true
-    },
-    "devDependencies": {
-        "prettier": "^2.3.2"
-    }
+  "name": "storybook-builder-vite-parent",
+  "version": "0.1.13",
+  "description": "An experimental plugin to run and build Storybooks with Vite",
+  "license": "MIT",
+  "engines": {
+    "node": ">=16.0.0"
+  },
+  "scripts": {
+    "lint": "yarn lint:prettier && yarn lint:eslint",
+    "lint:prettier": "prettier --write .",
+    "lint:eslint": "eslint \"packages/*/**/*.{ts,tsx,js,jsx,mjs,cjs}\" --fix",
+    "lint-ci": "yarn lint-ci:prettier && yarn lint-ci:eslint",
+    "lint-ci:prettier": "prettier . --check",
+    "lint-ci:eslint": "eslint \"packages/*/**/*.{ts,tsx,js,jsx,mjs,cjs}\" --max-warnings=0"
+  },
+  "workspaces": [
+    "packages/example-react",
+    "packages/example-svelte",
+    "packages/example-vue",
+    "packages/example-workspaces",
+    "packages/storybook-builder-vite"
+  ],
+  "devDependencies": {
+    "@types/node": "^16.0.0",
+    "@typescript-eslint/eslint-plugin": "^5.9.0",
+    "@typescript-eslint/parser": "^5.9.0",
+    "eslint": "^8.6.0",
+    "eslint-config-prettier": "^8.3.0",
+    "eslint-plugin-only-warn": "^1.0.3",
+    "eslint-plugin-storybook": "^0.5.5",
+    "prettier": "^2.5.1",
+    "typescript": "^4.5.4"
+  }
 }