Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

🧰 Frontend Infrastructure and Tooling 🛠️ #3

Merged
merged 22 commits into from
Apr 12, 2021
Merged
Changes from 1 commit
Commits
Show all changes
22 commits
Select commit Hold shift + click to select a range
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
Added ESLint configs
codemonkey800 committed Apr 9, 2021

Unverified

This user has not yet uploaded their public signing key.
commit 7d21dfd0919583e7fc749f916d1325f7e23ce1f7
80 changes: 80 additions & 0 deletions client/.eslintrc.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,80 @@
/**
* ESLint configuration for napari hub client. All client code is linted using
* this configuration. That includes JS tooling modules, configuration scripts
* (next.config.js, plopfile.js, etc.), E2E tests, and application source code.
*
* Files with specific configurations are handled using the ESLint `overrides`
* feature. We use overrides over nested `.eslintrc.js` files (for example
* `src/.eslintrc.js` and `src/pages/.eslintrc.js`) to make this configuration
* file the Single Source of Truth for ESLint configuration.
*/

const configs = {
dev: require.resolve('./eslint/dev'),
e2e: require.resolve('./eslint/e2e'),
react: require.resolve('./eslint/react'),
tests: require.resolve('./eslint/tests'),
typescript: require.resolve('./eslint/typescript'),
};

module.exports = {
root: true,
extends: ['airbnb/base', 'prettier', configs.dev],
plugins: ['simple-import-sort'],

overrides: [
// TypeScript scripts
{
files: ['*.ts'],
extends: [configs.typescript, configs.dev],
},

// Unit tests
{
files: ['./src/**/*.test.ts', './jest/**/*.ts'],
extends: [configs.typescript, configs.dev, configs.tests],
},

// E2E tests
{
files: ['./tests/**/*.ts'],
extends: [configs.typescript, configs.dev, configs.e2e],
},

// TypeScript and React source code.
{
files: ['./src/**/*.ts', './src/**/*.tsx'],
extends: [configs.typescript, configs.react],
},

/*
Disable explicit return types for TSX files. Prefer inferred return
types for React component:
https://kentcdodds.com/blog/how-to-write-a-react-component-in-typescript
*/
{
files: ['./src/**/*.tsx'],
rules: {
'@typescript-eslint/explicit-module-boundary-types': 'off',
},
},

/*
Prefer default exports for Next.js pages and SCSS modules.

Next.js routing needs the pages to be exported as default exports, and
the team has no plans to add support for the time being:
https://github.com/vercel/next.js/issues/7275

SCSS modules export from the `default` export, so their type
definitions are generated using `export default styles`.
*/
{
files: ['./src/pages/**/*.tsx', './src/**/*.module.scss.d.ts'],
rules: {
'import/no-default-export': 'off',
'import/prefer-default-export': 'error',
},
},
],
};
8 changes: 8 additions & 0 deletions client/eslint/dev.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
module.exports = {
rules: {
'import/no-extraneous-dependencies': 'off',
'no-console': 'off',
'no-param-reassign': 'off',
'no-underscore-dangle': 'off',
},
};
3 changes: 3 additions & 0 deletions client/eslint/e2e.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
module.exports = {
extends: [require.resolve('./jest'), 'plugin:jest-playwright/recommended'],
};
23 changes: 23 additions & 0 deletions client/eslint/jest.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
const { resolve } = require('path');

const pkg = require('../package.json');

module.exports = {
parserOptions: {
project: resolve(__dirname, '../tsconfig.jest.json'),
},

extends: ['plugin:jest/recommended', 'plugin:jest/style'],

settings: {
/*
Jest version has to be passed explicitly because ESlint throws an error
about not being able to find the Jest version. This is likely due to
the frontend being stored in `client/`.
https://git.io/JYhAJ
*/
jest: {
version: pkg.devDependencies.jest,
},
},
};
25 changes: 25 additions & 0 deletions client/eslint/react.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,25 @@
module.exports = {
extends: ['airbnb/hooks'],

rules: {
/*
React automatically adds the import as part of the new JSX transform:
https://reactjs.org/blog/2020/09/22/introducing-the-new-jsx-transform.html#nextjs
*/
'react/react-in-jsx-scope': 'off',

/*
Prop spreading is very useful as a simple way for passing multiple
props to a component. However, we should still be careful about passing
unnecessary props.
*/
'react/jsx-props-no-spreading': 'off',

/*
This rule isn't really needed anymore since we can use ES6 object defaults
for props. There are also plans to deprecate the use of `defaultProps`:
https://github.com/reactjs/rfcs/pull/107
*/
'react/require-default-props': 'off',
},
};
3 changes: 3 additions & 0 deletions client/eslint/tests.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
module.exports = {
extends: [require.resolve('./jest')],
};
27 changes: 27 additions & 0 deletions client/eslint/typescript.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,27 @@
const { resolve } = require('path');

module.exports = {
parserOptions: {
project: resolve(__dirname, '../tsconfig.json'),
},

extends: [
'airbnb-typescript',
'plugin:@typescript-eslint/recommended',
'plugin:@typescript-eslint/recommended-requiring-type-checking',
'plugin:prettier/recommended',
],

plugins: ['simple-import-sort'],

rules: {
// Named exports are nicer to work with for a variety of reasons:
// https://basarat.gitbook.io/typescript/main-1/defaultisbad
'import/no-default-export': 'error',
'import/prefer-default-export': 'off',

// Let ESlint sort our imports for us so we don't have to think about it.
'simple-import-sort/exports': 'error',
'simple-import-sort/imports': 'error',
},
};