Skip to content

Commit

Permalink
chore: Remove eslint-plugin-prettier; add more default aliases for src
Browse files Browse the repository at this point in the history
  • Loading branch information
mryechkin committed Oct 20, 2023
1 parent 25c00b6 commit 9430bda
Show file tree
Hide file tree
Showing 6 changed files with 57 additions and 54 deletions.
2 changes: 1 addition & 1 deletion .prettierrc.json
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@
"^react$",
"<THIRD_PARTY_MODULES>",
"",
"^(src|~)(/.*)$",
"^(src|~|@|#)(/.*)$",
"",
"^[.]"
]
Expand Down
77 changes: 41 additions & 36 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@
## Overview

This configuration extends [Airbnb](https://www.npmjs.com/package/eslint-config-airbnb) ESLint config, with [`eslint-config-airbnb/hooks`](https://github.com/airbnb/javascript/tree/master/packages/eslint-config-airbnb#eslint-config-airbnbhooks) enabled, and Prettier integration via the ESLint [plugin](https://github.com/prettier/eslint-plugin-prettier). Additionally, a few default rules are overriden to provide a more relaxed development experience in Next.js applications out of the box.
This configuration extends [Airbnb](https://www.npmjs.com/package/eslint-config-airbnb) ESLint config, with [`eslint-config-airbnb/hooks`](https://github.com/airbnb/javascript/tree/master/packages/eslint-config-airbnb#eslint-config-airbnbhooks) enabled, and Prettier integration via the ESLint [plugin](https://github.com/prettier/eslint-plugin-prettier). Additionally, a few default rules are overridden to provide a more relaxed development experience in Next.js applications out of the box.

The goal of this configuration is to get code linting and formatting up and running as quickly as possible in a modern development environment, without sacrificing cleanliness and readability, and having to configure ESLint + Prettier from scratch every time.

Expand All @@ -28,7 +28,6 @@ This will install the shared config, as well as its peer dependencies:
- [eslint-import-resolver-custom-alias](https://github.com/laysent/eslint-import-resolver-custom-alias)
- [eslint-plugin-import](https://github.com/import-js/eslint-plugin-import)
- [eslint-plugin-jsx-a11y](https://github.com/jsx-eslint/eslint-plugin-jsx-a11y)
- [eslint-plugin-prettier](https://github.com/prettier/eslint-plugin-prettier)
- [eslint-plugin-react](https://github.com/jsx-eslint/eslint-plugin-react)
- [eslint-plugin-react-hooks](https://github.com/facebook/react/tree/main/packages/eslint-plugin-react-hooks)
- [eslint-plugin-sort-destructure-keys](https://github.com/mthadley/eslint-plugin-sort-destructure-keys)
Expand Down Expand Up @@ -57,7 +56,7 @@ To start using this shared config, add `eslint-config-acme` (or just `acme`) to
}
```

or the `.eslintrc` file:
or the `.eslintrc` [configuration file](https://eslint.org/docs/latest/use/configure/configuration-files):

```jsx
// .eslintrc
Expand All @@ -66,6 +65,9 @@ or the `.eslintrc` file:
}
```

> **NOTE:**
> The new [flat config](https://eslint.org/docs/latest/use/configure/configuration-files-new) format is not yet supported, as there is an [upstream dependency](https://github.com/airbnb/javascript/issues/2804) for its support in `eslint-config-airbnb`.
## Import Alias

This config provides a default import alias resolver for `eslint-plugin-import` to support shorthand imports of local modules:
Expand All @@ -74,28 +76,39 @@ This config provides a default import alias resolver for `eslint-plugin-import`
{
"import/resolver": {
"eslint-import-resolver-custom-alias": {
"alias": { "src": "./src" },
"alias": {
"~": "./src",
"@": "./src",
"#": "./src",
"src": "./src"
},
"extensions": [".js", ".jsx", ".ts", ".tsx"]
}
}
}
```

This will allow you to write imports like this anywhere in your code:
This maps any of the above shorthands (`~`, `@`, `#`, `src`) to the `./src` directory in your project, and allows you to write imports like this anywhere in your code:

```jsx
import Foo from 'src/components/foo';
import Foo from '~/components/Foo';
// or
import Foo from '@/components/Foo';
// or
import Foo from '#/components/Foo';
// or
import Foo from 'src/components/Foo';
```

instead of relative paths:

```jsx
import Foo from '../../components/foo';
import Foo from '../../components/Foo';
```

when using [absolute imports and module path aliases](https://nextjs.org/docs/advanced-features/module-path-aliases) in **Next.js**.
Use this alongside [absolute imports and module path aliases](https://nextjs.org/docs/advanced-features/module-path-aliases) in **Next.js**.

This can also be overridden in your local `.eslintrc` file, if needed:
These aliases can also be customized in your local configuration file, if needed:

```jsx
// .eslintrc
Expand Down Expand Up @@ -130,7 +143,7 @@ Import statement sorting is enabled via [`@ianvs/prettier-plugin-sort-imports`](
"^react$",
"<THIRD_PARTY_MODULES>",
"",
"^(src|~)(/.*)$",
"^(src|~|@|#)(/.*)$",
"",
"^[.]"
]
Expand All @@ -144,7 +157,7 @@ import fs from 'node:fs';

import { module } from 'package-name';

import foo from 'src/foo';
import foo from '@/foo';

import main from '../index';
import { bar } from './bar';
Expand All @@ -157,7 +170,7 @@ import fs from 'node:fs';

import { module } from 'package-name';

import foo from 'src/foo';
import foo from '@/foo';

import main from '../index';
import { bar } from './bar';
Expand All @@ -167,38 +180,19 @@ See the plugin [docs](https://github.com/IanVS/prettier-plugin-sort-imports#impo

## Prettier

This config supports Prettier integration out of the box. Rules that may conflict with ESLint are disabled via recommended configuration in [eslint-plugin-prettier](https://github.com/prettier/eslint-plugin-prettier).

If you wish to override any [Prettier options](https://prettier.io/docs/en/options.html), you can do so by specifying them under `prettier/prettier` rule in your ESLint config file. For example:

```jsx
// .eslintrc
{
"extends": ["acme"],
"rules": {
"prettier/prettier": [
"error",
{
"printWidth": 90
}
]
}
}
```

Make sure that these rules match the options specified in your Prettier config file.
This config supports Prettier integration out of the box. Rules that may conflict with ESLint are disabled via [eslint-config-prettier](https://github.com/prettier/eslint-config-prettier).

### Shared Config

This package provides a shared Prettier config for use alongside the ESLint one.
This package provides a shared Prettier config for use alongside ESLint.

To enable, create a Prettier config file (`.prettierrc`, `.prettierrc.js`, etc.), and import the shared Prettier config.

**JSON:**

```json
```jsx
// .prettierrc
"eslint-config-acme/prettier"
'eslint-config-acme/prettier';
```

**CommonJS:**
Expand Down Expand Up @@ -239,13 +233,24 @@ Add the following to your `package.json` file to define a script that will lint
}
```

Or, if using Next.js:

```jsx
// package.json
{
"scripts": {
"lint": "next lint"
}
}
```

To fix all automatically-fixable issues, you can add the following script to your `package.json` as well (in addition to above):

```jsx
// package.json
{
"scripts": {
"lint:fix": "eslint --ignore-path .gitignore --fix ."
"lint:fix": "npm run lint -- --fix"
}
}
```
Expand Down
12 changes: 5 additions & 7 deletions package.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "eslint-config-acme",
"version": "3.0.1",
"version": "3.1.0",
"description": "ESLint + Prettier config for React",
"keywords": [
"eslint",
Expand All @@ -23,17 +23,16 @@
"url": "https://github.com/mryechkin"
},
"exports": {
".": "./index.js",
".": "./src/index.js",
"./prettier": "./.prettierrc.json"
},
"main": "index.js",
"main": "src/index.js",
"files": [
"LICENSE",
"CHANGELOG.md",
"README.md",
".prettierrc.json",
"index.js",
"lib"
"src"
],
"scripts": {
"lint": "eslint --ignore-path .gitignore .",
Expand All @@ -45,13 +44,12 @@
},
"peerDependencies": {
"@ianvs/prettier-plugin-sort-imports": "^4.1",
"eslint": "^8.46",
"eslint": "^8.51",
"eslint-config-airbnb": "^19.0",
"eslint-config-prettier": "^9.0.0",
"eslint-import-resolver-custom-alias": "^1.3.2",
"eslint-plugin-import": "^2.28",
"eslint-plugin-jsx-a11y": "^6.7",
"eslint-plugin-prettier": "^5.0",
"eslint-plugin-react": "^7.33",
"eslint-plugin-react-hooks": "^4.6",
"eslint-plugin-sort-destructure-keys": "^1.5.0",
Expand Down
20 changes: 10 additions & 10 deletions index.js → src/index.js
Original file line number Diff line number Diff line change
@@ -1,13 +1,8 @@
const base = require('./lib/base.js');
const react = require('./lib/react.js');
const base = require('./rules/base.js');
const react = require('./rules/react.js');

module.exports = {
extends: [
'airbnb',
'airbnb/hooks',
'plugin:prettier/recommended',
'plugin:tailwindcss/recommended',
],
extends: ['airbnb', 'airbnb/hooks', 'plugin:tailwindcss/recommended', 'prettier'],
env: {
browser: true,
commonjs: true,
Expand All @@ -16,7 +11,7 @@ module.exports = {
jest: true,
},
parserOptions: {
ecmaVersion: 2022,
ecmaVersion: 'latest',
sourceType: 'module',
ecmaFeatures: {
jsx: true,
Expand All @@ -34,7 +29,12 @@ module.exports = {
},
'import/resolver': {
'eslint-import-resolver-custom-alias': {
alias: { src: './src' },
alias: {
'~': './src',
'@': './src',
'#': './src',
src: './src',
},
extensions: ['.js', '.jsx', '.ts', '.tsx'],
},
},
Expand Down
File renamed without changes.
File renamed without changes.

0 comments on commit 9430bda

Please sign in to comment.