Configure eslint and prettier

Author: openscript

.eslintrc.js

@@ -0,0 +1,24 @@
+module.exports = {
+  parser: "@typescript-eslint/parser",
+  extends: [
+    "plugin:react/recommended",
+    "plugin:@typescript-eslint/recommended",
+    "prettier/@typescript-eslint",
+    "plugin:prettier/recommended"
+  ],
+  parserOptions: {
+    ecmaFeatures: {
+      jsx: true
+    },
+    ecmaVersion: 2018,
+    sourceType: "module"
+  },
+  rules: {
+    "@typescript-eslint/explicit-function-return-type": "off"
+  },
+  settings: {
+    react: {
+      version: "detect"
+    }
+  }
+};

.prettierrc.js

@@ -0,0 +1,7 @@
+module.exports = {
+  semi: true,
+  trailingComma: "all",
+  singleQuote: true,
+  printWidth: 120,
+  tabWidth: 2
+};

.vscode/settings.json

@@ -0,0 +1,12 @@
+{
+  "files.autoSave": "onFocusChange",
+  "editor.codeActionsOnSave": {
+    "source.fixAll.eslint": true
+  },
+  "eslint.validate": [
+    "javascript",
+    "javascriptreact",
+    "typescript",
+    "typescriptreact"
+  ]
+}

README.md

@@ -2,11 +2,14 @@
 Flexible, typed and easy to use React component to provide CSV, TSV and other delimiter-separated values formats (DSV) import functionality.
 
 ## Tools
- - yarn
- - rollup
- - React
- - typescript
+ - [yarn](https://yarnpkg.com/)
+ - [rollup.js](https://rollupjs.org/)
+ - [TypeScript](https://www.typescriptlang.org/)
+   - [TypeScript ESLint](https://typescript-eslint.io/)
+ - [React](https://reactjs.org/)
+ - [Storybook](https://storybook.js.org/)
 
 ## Resources
+ - [Article: Using ESLint and Prettier in a TypeScript Project](https://www.robertcooper.me/using-eslint-and-prettier-in-a-typescript-project)
  - [Template: Rollup Starter Lib (TypeScript)](https://github.com/rollup/rollup-starter-lib/tree/typescript)
  - [Article: Creating a React Component library using Rollup, Typescript, Sass and Storybook](https://blog.harveydelaney.com/creating-your-own-react-component-library/) <br> Explains how to create a React component library using Rollup

package.json

@@ -17,8 +17,15 @@
     "@types/node": "^13.11.1",
     "@types/react": "^16.9.34",
     "@types/react-dom": "^16.9.6",
+    "@typescript-eslint/eslint-plugin": "^2.27.0",
+    "@typescript-eslint/parser": "^2.27.0",
     "babel-loader": "^8.1.0",
     "babel-preset-react-app": "^9.1.2",
+    "eslint": "^6.8.0",
+    "eslint-config-prettier": "^6.10.1",
+    "eslint-plugin-prettier": "^3.1.2",
+    "eslint-plugin-react": "^7.19.0",
+    "prettier": "^2.0.4",
     "rollup": "^2.6.0",
     "ts-node": "^8.8.2",
     "tslib": "^1.11.1",

src/DSVImport.stories.tsx

@@ -5,4 +5,4 @@ export default { title: 'DSVImport' };
 
 export const Primary = () => {
   return <DSVImport />;
-}
+};

src/DSVImport.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
 
 export const DSVImport: React.FC = () => {
-	return <div>Hello</div>;
-} 
+  return <div>Hello</div>;
+};