refactor: Update eslint config

.eslintrc.json

@@ -1,71 +1,104 @@
 {
   "parser": "@typescript-eslint/parser",
+  "plugins": [
+    "@typescript-eslint",
+    "eslint-plugin-import",
+    "typescript-sort-keys",
+    "prefer-arrow"
+  ],
   "extends": [
-    "plugin:react/recommended"
+    "eslint:recommended",
+    "plugin:react/recommended",
+    "plugin:@typescript-eslint/recommended",
+    "plugin:jest/recommended",
+    "plugin:jest/style",
+    "plugin:typescript-sort-keys/recommended"
   ],
-  "settings": {
-    "react": {
-      "version": "detect"
-    }
-  },
-  "env": {
-    "browser": true
-  },
   "ignorePatterns": [
-    "**/node_modules/*"
+    "**/node_modules/*",
+    "**/out/*",
+    "**/.next/*"
   ],
   "rules": {
-    "padded-blocks": 0,
-    "global-require": 0,
-    "function-paren-newline": 0,
-    "no-buffer-constructor": 0,
-    "import/no-extraneous-dependencies": 0,
-    "import/no-unresolved": 0,
-    "import/extensions": 0,
-    "import/no-mutable-exports": 0,
+    "comma-dangle": [
+      "error",
+      "always-multiline"
+    ],
+    "eol-last": ["error", "always"],
+    "indent": ["error", 2],
+    "jest/no-conditional-expect": 0,
+    "no-console": 2,
+    "no-trailing-spaces": 2,
+    "max-len": ["error", {
+      "code": 80,
+      "comments": 80,
+      "ignorePattern": "^import\\s.+\\sfrom\\s.+$",
+      "ignoreStrings": true,
+      "ignoreTemplateLiterals": true
+    }],
+    "multiline-comment-style": ["error", "separate-lines"],
+    "no-multiple-empty-lines": "error",
+    "no-multi-spaces": ["error", { "exceptions": { "Property": false } }],
+    "no-return-await": 2,
+    "arrow-body-style": ["error", "as-needed"],
+    "import/no-amd": 2,
+    "import/no-commonjs": 2,
+    "import/no-default-export": 2,
+    "import/no-namespace": 2,
+    "import/no-nodejs-modules": 0,
+    "keyword-spacing": ["error", { "overrides": {} }],
+    "react/prefer-stateless-function": 2,
     "react/prop-types": 0,
-    "react/display-name": 0,
-    "react/jsx-filename-extension": 0,
-    "react/prefer-stateless-function": 0,
-    "react/react-in-jsx-scope": 0,
-    "no-restricted-syntax": 0,
-    "no-useless-escape": 0,
-    "no-console": [
+    "react/jsx-wrap-multilines": ["error", {
+        "declaration": "parens-new-line",
+        "assignment": "parens-new-line",
+        "return": "parens-new-line",
+        "arrow": "parens-new-line",
+        "condition": "parens-new-line",
+        "logical": "parens-new-line",
+        "prop": "parens-new-line"
+      }
+    ],
+    "semi": ["error", "never"],
+    "sort-keys": 2,
+    "space-before-blocks": 2,
+    "@typescript-eslint/explicit-function-return-type": 0,
+    "@typescript-eslint/explicit-module-boundary-types": 0,
+    "@typescript-eslint/member-delimiter-style": ["error", {
+      "multiline": {
+        "delimiter": "none",
+        "requireLast": false
+      },
+      "singleline": {
+        "delimiter": "comma",
+        "requireLast": false
+      }
+    }],
+    "@typescript-eslint/no-explicit-any": 0,
+    "@typescript-eslint/no-unused-vars": [
+      2,
+      {
+        "argsIgnorePattern": "^_"
+      }
+    ],
+    "@typescript-eslint/no-var-requires": 0,
+    "prefer-arrow/prefer-arrow-functions": [
       "error",
       {
-        "allow": [
-          "warn",
-          "error"
-        ]
+        "disallowPrototype": true,
+        "singleReturnOnly": false,
+        "classPropertiesAllowed": false
       }
-    ]
+    ],
+    "prefer-destructuring": ["error", {"object": true, "array": true}],
+    "quotes": ["error", "single"],
+    "quote-props": ["error", "as-needed"],
+    "jsx-quotes": ["error", "prefer-single"]
   },
-  "overrides": [
-    {
-      "files": [
-        "src/**/*.{ts,tsx}"
-      ],
-      "extends": [
-        "plugin:@typescript-eslint/recommended"
-      ],
-      "rules": {
-        "@typescript-eslint/indent": [
-          "error",
-          2
-        ],
-        "semi": "off",
-        "@typescript-eslint/semi": [
-          "error",
-          "never"
-        ],
-        "@typescript-eslint/no-var-requires": 0,
-        "@typescript-eslint/no-explicit-any": 0,
-        "@typescript-eslint/explicit-function-return-type": 0,
-        "@typescript-eslint/explicit-member-accessibility": 0,
-        "@typescript-eslint/no-object-literal-type-assertion": 0,
-        "@typescript-eslint/prefer-interface": 0
-      },
-      "parser": "@typescript-eslint/parser"
+  "settings": {
+    "react": {
+      "pragma": "React",
+      "version": "16.13.1"
     }
-  ]
+  }
 }

examples/simple/components/Header.js

@@ -6,12 +6,12 @@ export const Header = ({ title }) => (
     <Head>
       <title>next-i18next</title>
 
-      <link href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css" rel="stylesheet" />
-      <link href="/app.css" rel="stylesheet" />
+      <link href='https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css' rel='stylesheet' />
+      <link href='/app.css' rel='stylesheet' />
 
-      <link href="https://cdnjs.cloudflare.com/ajax/libs/typicons/2.0.9/typicons.min.css" rel="stylesheet" />
-      <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400|Oswald:600" rel="stylesheet" />
-      <link data-react-helmet="true" rel="icon" href="https://blobscdn.gitbook.com/v0/b/gitbook-28427.appspot.com/o/spaces%2F-L9iS6Wm2hynS5H9Gj7j%2Favatar.png?generation=1523462254548780&amp;alt=media" />
+      <link href='https://cdnjs.cloudflare.com/ajax/libs/typicons/2.0.9/typicons.min.css' rel='stylesheet' />
+      <link href='https://fonts.googleapis.com/css?family=Open+Sans:300,400|Oswald:600' rel='stylesheet' />
+      <link data-react-helmet='true' rel='icon' href='https://blobscdn.gitbook.com/v0/b/gitbook-28427.appspot.com/o/spaces%2F-L9iS6Wm2hynS5H9Gj7j%2Favatar.png?generation=1523462254548780&amp;alt=media' />
     </Head>
     <h2>
       next-i18next
@@ -21,10 +21,10 @@ export const Header = ({ title }) => (
       {title}
     </h1>
     <a
-      className="github"
-      href="//github.com/isaachinman/next-i18next"
+      className='github'
+      href='//github.com/isaachinman/next-i18next'
     >
-      <i className="typcn typcn-social-github-circular" />
+      <i className='typcn typcn-social-github-circular' />
     </a>
   </>
 )

examples/simple/next-i18next.config.js

@@ -2,5 +2,5 @@ module.exports = {
   i18n: {
     defaultLocale: 'en',
     locales: ['en', 'de'],
-  }
+  },
 }

examples/simple/pages/index.js

@@ -42,7 +42,7 @@ const Homepage = () => {
 export const getStaticProps = async ({ locale }) => ({
   props: {
     ...await serverSideTranslations(locale, ['common', 'footer']),
-  }
+  },
 })
 
 export default Homepage

examples/simple/pages/second-page.js

@@ -30,7 +30,7 @@ const SecondPage = () => {
 export const getStaticProps = async ({ locale }) => ({
   props: {
     ...await serverSideTranslations(locale, ['second-page', 'footer']),
-  }
+  },
 })
 
 export default SecondPage

package.json

@@ -27,7 +27,7 @@
   ],
   "scripts": {
     "check-types": "tsc",
-    "lint": "eslint types.d.ts src/**/* examples",
+    "lint": "eslint --ext .ts,.tsx types.d.ts src",
     "lint:fix": "eslint types.d.ts src/**/* examples --fix",
     "clean": "rm -rf examples/simple/.next && rm -rf dist && mkdir dist",
     "build:es": "BABEL_ENV=es babel src --extensions '.ts,.tsx' --out-dir dist/es --copy-files",
@@ -83,7 +83,10 @@
     "bundlesize": "^0.18.0",
     "eslint": "^7.17.0",
     "eslint-plugin-import": "^2.22.1",
+    "eslint-plugin-jest": "^24.1.5",
+    "eslint-plugin-prefer-arrow": "^1.2.3",
     "eslint-plugin-react": "^7.22.0",
+    "eslint-plugin-typescript-sort-keys": "^1.5.0",
     "husky": "^3.0.0",
     "jest": "^24.1.0",
     "next": "^10.0.4",

src/appWithTranslation.tsx

@@ -9,10 +9,12 @@ import { SSRConfig } from '../types'
 export { I18nContext, Trans, useTranslation, withTranslation } from 'react-i18next'
 
 type AppProps = {
-  pageProps: SSRConfig;
+  pageProps: SSRConfig
 }
 
-export const appWithTranslation = <P extends Record<string, unknown>>(WrappedComponent: React.ComponentType | React.ElementType): React.ComponentType<P> | React.ElementType<P> => {
+export const appWithTranslation = <P extends Record<string, unknown>>(
+  WrappedComponent: React.ComponentType | React.ElementType):
+  React.ComponentType<P> | React.ElementType<P> => {
   const AppWithTranslation = (props: AppProps) => {
     let i18n = null
     let locale = null
@@ -27,7 +29,7 @@ export const appWithTranslation = <P extends Record<string, unknown>>(WrappedCom
       const parsedUserConfig = Function(`'use strict';return(${userConfig})`)()
 
       locale = initialLocale;
-  
+
       ({ i18n } = createClient({
         ...createConfig({
           ...parsedUserConfig,

src/config/createConfig.test.ts

@@ -19,14 +19,14 @@ describe('createConfig', () => {
         (fs.existsSync as jest.Mock).mockReturnValue(true);
         (fs.readdirSync as jest.Mock).mockReturnValue([])
       })
-  
+
       it('throws when lng is not provided', () => {
         expect(createConfig).toThrow('config.lng was not passed into createConfig')
       })
-    
+
       it('returns a valid config when only lng is provided', () => {
         const config = createConfig({ lng: 'en' } as UserConfig)
-  
+
         expect((config.backend as any).addPath).toMatch('/public/locales/{{lng}}/{{ns}}.missing.json')
         expect((config.backend as any).loadPath).toMatch('/public/locales/{{lng}}/{{ns}}.json')
         expect(config.defaultLocale).toEqual('en')
@@ -49,20 +49,20 @@ describe('createConfig', () => {
 
       it('deep merges backend', () => {
         const config = createConfig({
-          lng: 'en',
           backend: {
             hello: 'world',
-          }
+          },
+          lng: 'en',
         } as UserConfig)
         expect((config.backend as any).hello).toEqual('world')
       })
 
       it('deep merges detection', () => {
         const config = createConfig({
-          lng: 'en',
           detection: {
             hello: 'world',
-          }
+          },
+          lng: 'en',
         } as UserConfig)
         expect((config.detection as any).hello).toEqual('world')
       })
@@ -73,7 +73,7 @@ describe('createConfig', () => {
         (fs.existsSync as jest.Mock).mockReturnValueOnce(false)
 
         const config = createConfig.bind(null, {
-          lng: 'en'
+          lng: 'en',
         })
 
         expect(config).toThrow('Default namespace not found at public/locales/en/common.json')
@@ -84,21 +84,21 @@ describe('createConfig', () => {
       it('returns a config without calling any fs methods', () => {
         (fs.existsSync as jest.Mock).mockReset();
         (fs.readdirSync as jest.Mock).mockReset()
-  
+
         createConfig({
           lng: 'en', use: [{
-            type: 'backend'
+            type: 'backend',
           }] } as UserConfig)
-  
+
         expect(fs.existsSync).toHaveBeenCalledTimes(0)
         expect(fs.readdirSync).toHaveBeenCalledTimes(0)
       })
     })
 
-    describe('ci mode', () => {  
+    describe('ci mode', () => {
       it('returns a config without calling any fs methods', () => {
         createConfig({ lng: 'cimode' } as UserConfig)
-  
+
         expect(fs.existsSync).toHaveBeenCalledTimes(0)
         expect(fs.readdirSync).toHaveBeenCalledTimes(0)
       })
@@ -113,10 +113,10 @@ describe('createConfig', () => {
     it('throws when lng is not provided', () => {
       expect(createConfig).toThrow('config.lng was not passed into createConfig')
     })
-    
+
     it('returns a valid config when only lng is provided', () => {
       const config = createConfig({ lng: 'en' } as UserConfig)
-  
+
       expect((config.backend as any).addPath).toMatch('/public/locales/{{lng}}/{{ns}}.missing.json')
       expect((config.backend as any).loadPath).toMatch('/public/locales/{{lng}}/{{ns}}.json')
       expect(config.defaultLocale).toEqual('en')
@@ -129,7 +129,7 @@ describe('createConfig', () => {
       expect(config.localeStructure).toEqual('{{lng}}/{{ns}}')
       expect(config.locales).toEqual(['en'])
       expect(config.ns).toEqual(['common'])
-      expect(config.preload).toEqual(undefined)
+      expect(config.preload).toBeUndefined()
       expect(config.strictMode).toEqual(true)
       expect(config.use).toEqual([])
     })