init eslint

Author: piecyk

.babelrc

@@ -0,0 +1,3 @@
+dist
+node_modules
+

.eslintignore

@@ -0,0 +1,68 @@
+const jest = {
+  files: ['src/**/*.test.{ts,tsx}'],
+  env: {
+    jest: true,
+  },
+}
+
+const build = {
+  files: ['webpack.config.js', 'babel.config.js'],
+  env: {
+    node: true,
+    browser: false,
+  },
+  rules: {
+    '@typescript-eslint/no-var-requires': 0,
+  },
+}
+
+module.exports = {
+  env: {
+    es6: true,
+    browser: true,
+  },
+  parser: '@typescript-eslint/parser',
+  extends: [
+    'eslint:recommended',
+    'plugin:@typescript-eslint/recommended',
+    'plugin:react/recommended',
+
+    'plugin:import/errors',
+    'plugin:import/warnings',
+
+    'prettier',
+    'prettier/@typescript-eslint',
+    'prettier/react',
+  ],
+  plugins: ['react-hooks'],
+  parserOptions: {
+    project: './tsconfig.json',
+    sourceType: 'module',
+  },
+  settings: {
+    react: {
+      version: 'detect',
+    },
+    'import/parsers': {
+      '@typescript-eslint/parser': ['.ts', '.tsx'],
+    },
+    'import/resolver': {
+      node: {
+        extensions: ['.ts', '.tsx', '.js', '.jsx', '.json'],
+        moduleDirectory: ['node_modules', 'src'],
+      },
+    },
+  },
+  rules: {
+    'react-hooks/rules-of-hooks': 2,
+    'no-console': 0,
+    '@typescript-eslint/explicit-function-return-type': 0,
+    '@typescript-eslint/member-delimiter-style': 0,
+    '@typescript-eslint/indent': [2, 2],
+    '@typescript-eslint/member-ordering': 2,
+    '@typescript-eslint/explicit-member-accessibility': 0,
+    'import/first': 2,
+    'import/newline-after-import': 2,
+  },
+  overrides: [jest, build],
+}

.eslintrc.js

@@ -0,0 +1,3 @@
+dist/*
+site/*
+yarn.lock

.prettierignore

@@ -0,0 +1,5 @@
+{
+  "eslint.validate": ["javascript", "javascriptreact", "typescript", "typescriptreact"],
+  "eslint.run": "onSave",
+  "editor.formatOnSave": true
+}

.vscode/settings.json

@@ -0,0 +1,3 @@
+# webpack5-babel-typescript-react
+
+> Playground for testing webpack 5, typescript with babel 7, react, jest

README.md

@@ -0,0 +1,24 @@
+'use strict'
+
+module.exports = function(api) {
+  const env = api.env()
+
+  const config = {
+    presets: [
+      '@babel/typescript',
+      '@babel/preset-react',
+      [
+        '@babel/env',
+        {
+          modules: env === 'test' ? 'commonjs' : false,
+          targets: {
+            browsers: ['last 2 versions'],
+          },
+        },
+      ],
+    ],
+    plugins: ['@babel/proposal-class-properties', '@babel/proposal-object-rest-spread'],
+  }
+
+  return config
+}

babel.config.js

@@ -10,7 +10,9 @@
     "dev:webpack": "webpack-dev-server --mode development --content-base ./site",
     "dev:ts": "tsc --watch --preserveWatchOutput",
     "test": "jest",
-    "build": "yarn run clean && tsc && yarn run test && webpack --mode production"
+    "build": "yarn run clean && yarn run lint && tsc && yarn run test && webpack --mode production",
+    "prettier": "prettier --write '**/*.{ts,tsx,js,json,css}'",
+    "lint": "eslint . --ext .js,.ts,.tsx"
   },
   "devDependencies": {
     "@babel/core": "^7.2.2",
@@ -22,7 +24,14 @@
     "@types/jest": "^23.3.13",
     "@types/react": "^16.7.22",
     "@types/react-dom": "^16.0.11",
+    "@typescript-eslint/eslint-plugin": "^1.1.1",
+    "@typescript-eslint/parser": "^1.1.1",
     "babel-loader": "^8.0.5",
+    "eslint": "^5.12.1",
+    "eslint-config-prettier": "^4.0.0",
+    "eslint-plugin-import": "^2.16.0",
+    "eslint-plugin-react": "^7.12.4",
+    "eslint-plugin-react-hooks": "^0.0.0",
     "jest": "^24.0.0",
     "npm-run-all": "^4.1.5",
     "typescript": "^3.3.0-rc",

package.json

@@ -1,5 +1,24 @@
 import React, { useState } from 'react'
 
+interface ExampleLabelProps {
+  count: number
+}
+
+class ExampleLabel extends React.Component<ExampleLabelProps, {}> {
+  constructor(props: ExampleLabelProps) {
+    super(props)
+  }
+  public render() {
+    const { count } = this.props
+    this.log()
+
+    return <p>You clicked {count} times!</p>
+  }
+  log() {
+    console.log('render')
+  }
+}
+
 interface Props {
   initialCounter: number
 }
@@ -11,7 +30,7 @@ export default function Example({ initialCounter }: Props) {
 
   return (
     <div>
-      <p>You clicked {count} times!</p>
+      <ExampleLabel count={count} />
       <button onClick={() => setCount(count + 1)}>Click me</button>
     </div>
   )