Skip to content

Commit

Permalink
feat: Migrating to @ianvs/prettier-plugin-sort-imports; update shared…
Browse files Browse the repository at this point in the history
… Prettier config
  • Loading branch information
mryechkin committed Oct 15, 2023
1 parent 09de351 commit 25c00b6
Show file tree
Hide file tree
Showing 6 changed files with 129 additions and 37 deletions.
4 changes: 0 additions & 4 deletions .prettierrc

This file was deleted.

22 changes: 22 additions & 0 deletions .prettierrc.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
{
"printWidth": 90,
"singleQuote": true,
"plugins": [
"@ianvs/prettier-plugin-sort-imports",
"prettier-plugin-packagejson",
"prettier-plugin-tailwindcss"
],
"importOrder": [
"<TYPES>",
"<TYPES>^[.]",
"",
"<BUILT_IN_MODULES>",
"",
"^react$",
"<THIRD_PARTY_MODULES>",
"",
"^(src|~)(/.*)$",
"",
"^[.]"
]
}
93 changes: 91 additions & 2 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -31,10 +31,11 @@ This will install the shared config, as well as its peer dependencies:
- [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-simple-import-sort](https://github.com/lydell/eslint-plugin-simple-import-sort)
- [eslint-plugin-sort-destructure-keys](https://github.com/mthadley/eslint-plugin-sort-destructure-keys)
- [eslint-plugin-tailwindcss](https://github.com/francoismassart/eslint-plugin-tailwindcss)
- [prettier](https://github.com/prettier/prettier)
- [@ianvs/prettier-plugin-sort-imports](https://github.com/IanVS/prettier-plugin-sort-imports)
- [prettier-plugin-packagejson](https://github.com/matzkoh/prettier-plugin-packagejson)
- [prettier-plugin-tailwindcss](https://github.com/tailwindlabs/prettier-plugin-tailwindcss)

**NOTE:** if you are on NPM <7, you will need to install these manually:
Expand Down Expand Up @@ -114,6 +115,56 @@ This can also be overridden in your local `.eslintrc` file, if needed:
}
```

## Import Sorting

Import statement sorting is enabled via [`@ianvs/prettier-plugin-sort-imports`](https://github.com/IanVS/prettier-plugin-sort-imports), with the following default `importOrder` set:

```json
{
"importOrder": [
"<TYPES>",
"<TYPES>^[.]",
"",
"<BUILT_IN_MODULES>",
"",
"^react$",
"<THIRD_PARTY_MODULES>",
"",
"^(src|~)(/.*)$",
"",
"^[.]"
]
}
```

This will take import statements like these:

```js
import fs from 'node:fs';

import { module } from 'package-name';

import foo from 'src/foo';

import main from '../index';
import { bar } from './bar';
```

And turn them into this:

```js
import fs from 'node:fs';

import { module } from 'package-name';

import foo from 'src/foo';

import main from '../index';
import { bar } from './bar';
```

See the plugin [docs](https://github.com/IanVS/prettier-plugin-sort-imports#importorder) for more information on how to customize this option.

## 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).
Expand All @@ -135,7 +186,45 @@ If you wish to override any [Prettier options](https://prettier.io/docs/en/optio
}
```

Make sure that these rules match the options specified in your `.prettierrc` file.
Make sure that these rules match the options specified in your Prettier config file.

### Shared Config

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

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

**JSON:**

```json
// .prettierrc
"eslint-config-acme/prettier"
```

**CommonJS:**

```jsx
// .prettierrc.js
/** @type {import("prettier").Config} */
const acme = require('eslint-config-acme/prettier');

module.exports = acme;
```

If you'd like to override any of the default options, you can use the spread operator (`...`) to extend the default config:

```jsx
// .prettierrc.js
/** @type {import("prettier").Config} */
const acme = require('eslint-config-acme/prettier');

const config = {
...acme,
singleQuote: false,
};

module.exports = config;
```

## Adding Scripts

Expand Down
2 changes: 1 addition & 1 deletion index.js
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@ module.exports = {
jsx: true,
},
},
plugins: ['import', 'simple-import-sort', 'sort-destructure-keys', 'tailwindcss'],
plugins: ['import', 'sort-destructure-keys', 'tailwindcss'],
rules: {
...base,
...react,
Expand Down
25 changes: 0 additions & 25 deletions lib/base.js
Original file line number Diff line number Diff line change
Expand Up @@ -9,31 +9,6 @@ module.exports = {
'import/first': 'error',
'import/newline-after-import': 'error',
'import/no-duplicates': 'error',
'simple-import-sort/imports': [
'error',
{
groups: [
// Node.js builtins
[
'^node:',
'^(assert|buffer|child_process|cluster|console|constants|crypto|dgram|dns|domain|events|fs|http|https|module|net|os|path|punycode|querystring|readline|repl|stream|string_decoder|sys|timers|tls|tty|url|util|vm|zlib|freelist|v8|process|async_hooks|http2|perf_hooks)(/.*|$)',
],
// Packages. `react` related packages come first
['^react', '^@?\\w'],
// Side effect imports
['^\\u0000'],
// Internal packages
['^(~|src|internals)(/.*|$)'],
// Parent imports. Put `..` last
['^\\.\\.(?!/?$)', '^\\.\\./?$'],
// Other relative imports. Put same-folder imports and `.` last
['^\\./(?=.*/)(?!/?$)', '^\\.(?!/?$)', '^\\./?$'],
// Style imports
['^.+\\.s?css$'],
],
},
],
'simple-import-sort/exports': 'error',
'sort-destructure-keys/sort-destructure-keys': 'warn',
'tailwindcss/classnames-order': 'off',
'no-console': 'warn',
Expand Down
20 changes: 15 additions & 5 deletions package.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "eslint-config-acme",
"version": "2.3.0",
"version": "3.0.1",
"description": "ESLint + Prettier config for React",
"keywords": [
"eslint",
Expand All @@ -22,32 +22,42 @@
"name": "Mykhaylo Ryechkin",
"url": "https://github.com/mryechkin"
},
"exports": {
".": "./index.js",
"./prettier": "./.prettierrc.json"
},
"main": "index.js",
"files": [
"LICENSE",
"CHANGELOG.md",
"README.md",
".prettierrc.json",
"index.js",
"lib"
],
"scripts": {
"lint": "eslint --ignore-path .gitignore .",
"lint:fix": "eslint --fix"
},
"devDependencies": {
"prettier": "^3.0.3",
"prettier-plugin-packagejson": "^2.4.6"
},
"peerDependencies": {
"@ianvs/prettier-plugin-sort-imports": "^4.1",
"eslint": "^8.46",
"eslint-config-airbnb": "^19.0",
"eslint-config-prettier": "^8.10",
"eslint-config-prettier": "^9.0.0",
"eslint-import-resolver-custom-alias": "^1.3.2",
"eslint-plugin-import": "^2.26",
"eslint-plugin-jsx-a11y": "^6.6",
"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-simple-import-sort": "^10.0",
"eslint-plugin-sort-destructure-keys": "^1.5.0",
"eslint-plugin-tailwindcss": "^3.13",
"prettier": "^3",
"prettier-plugin-packagejson": "^2.4",
"prettier-plugin-tailwindcss": "^0.5"
},
"engines": {
Expand Down

0 comments on commit 25c00b6

Please sign in to comment.