├── .gitignore ├── .npmignore ├── .prettierrc ├── package.json ├── .github └── workflows │ └── test.js.yml ├── license ├── readme.md ├── index.test.js └── index.js /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules/ -------------------------------------------------------------------------------- /.npmignore: -------------------------------------------------------------------------------- 1 | .github 2 | .gitignore 3 | .prettierrc 4 | index.test.js 5 | license 6 | readme.md 7 | yarn.lock -------------------------------------------------------------------------------- /.prettierrc: -------------------------------------------------------------------------------- 1 | printWidth: 120 2 | tabWidth: 4 3 | 4 | semi: false 5 | trailingComma: "none" 6 | bracketSpacing: true 7 | arrowParens: "avoid" 8 | jsxBracketSameLine: true 9 | singleQuote: true 10 | jsxSingleQuote: true 11 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "eslint-plugin-beautiful-imports", 3 | "version": "1.0.0", 4 | "description": "Rule sorts imports alphabetically in beatiful way", 5 | "main": "index.js", 6 | "repository": "https://github.com/sergeyshpadyrev/eslint-plugin-beautiful-imports", 7 | "author": "Sergey Shpadyrev ", 8 | "keywords": [ 9 | "eslint", 10 | "eslintplugin" 11 | ], 12 | "license": "MIT", 13 | "devDependencies": { 14 | "babel-eslint": "10.1.0", 15 | "eslint": "7.7.0", 16 | "jest": "26.4.1" 17 | }, 18 | "scripts": { 19 | "test": "jest" 20 | } 21 | } 22 | -------------------------------------------------------------------------------- /.github/workflows/test.js.yml: -------------------------------------------------------------------------------- 1 | # This workflow will do a clean install of node dependencies, build the source code and run tests across different versions of node 2 | # For more information see: https://help.github.com/actions/language-and-framework-guides/using-nodejs-with-github-actions 3 | 4 | name: test 5 | 6 | on: 7 | push: 8 | branches: [ master ] 9 | pull_request: 10 | branches: [ master ] 11 | 12 | jobs: 13 | build: 14 | 15 | runs-on: ubuntu-latest 16 | 17 | strategy: 18 | matrix: 19 | node-version: [10.x, 12.x, 14.x] 20 | 21 | steps: 22 | - uses: actions/checkout@v2 23 | - name: Use Node.js ${{ matrix.node-version }} 24 | uses: actions/setup-node@v1 25 | with: 26 | node-version: ${{ matrix.node-version }} 27 | - run: npm ci 28 | - run: npm test 29 | -------------------------------------------------------------------------------- /license: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2018 Sergey Shpadyrev 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /readme.md: -------------------------------------------------------------------------------- 1 | # Beautiful imports 2 | 3 | [![npm version](https://img.shields.io/npm/v/eslint-plugin-beautiful-imports)](https://badge.fury.io/js/eslint-plugin-beautiful-imports) 4 | [![License: MIT](https://img.shields.io/npm/l/eslint-plugin-beautiful-imports)](https://opensource.org/licenses/MIT) 5 | ![test](https://github.com/sergeyshpadyrev/eslint-plugin-beautiful-imports/workflows/test/badge.svg?branch=master) 6 | 7 | This plugin sorts imports strictly in alphabetical order by first letter of import statement. It's based on [sort-imports](https://eslint.org/docs/rules/sort-imports) rule but it has a few differences. 8 | 9 | It makes your imports look like this: 10 | 11 | ```js 12 | import 'alice' 13 | import 'bob' 14 | import * as Ant from 'ant' 15 | import * as Bear from 'bear' 16 | import Adam from 'adam' 17 | import { B as A, C } from 'letters' 18 | import David from 'david' 19 | import { E, F as H } from 'other-letters' 20 | ``` 21 | 22 | **If this project has helped you out, please support us with a star** 🌟 23 | 24 | ## Installation 25 | 26 | You need [ESLint](https://www.github.com/eslint/eslint) to be installed for this plugin to work 27 | Then install `eslint-plugin-beautiful-imports` 28 | 29 | ``` 30 | npm install --save eslint-plugin-beautiful-imports 31 | ``` 32 | 33 | or 34 | 35 | ``` 36 | yarn add eslint-plugin-beautiful-imports 37 | ``` 38 | 39 | Add "beautiful-imports" to the plugins section 40 | 41 | ``` 42 | 43 | {"plugins": ["beautiful-imports"]} 44 | 45 | ``` 46 | 47 | Add `beautiful-imports/sort-imports` to eslint rules 48 | 49 | ## Parameters 50 | 51 | This plugin has the following parameters: 52 | 53 | - allowSeparatedGroups (default: false) - When true the rule checks the sorting of import declaration statements only for those that appear on consecutive lines. 54 | In other words, a blank line or a comment line or line with any other statement after an import declaration statement will reset the sorting of import declaration statements. 55 | -------------------------------------------------------------------------------- /index.test.js: -------------------------------------------------------------------------------- 1 | const sortImports = require('./index').rules['sort-imports'] 2 | const RuleTester = require('eslint').RuleTester 3 | 4 | const ruleTester = new RuleTester({ 5 | parser: require('babel-eslint'), 6 | parserOptions: { ecmaVersion: 7, sourceType: 'module' } 7 | }) 8 | const errors = { 9 | sortImportsAlphabetically: { messageId: 'sortImportsAlphabetically' }, 10 | sortMembersAlphabetically: { messageId: 'sortMembersAlphabetically' }, 11 | unexpectedSyntaxOrder: { messageId: 'unexpectedSyntaxOrder' } 12 | } 13 | 14 | ruleTester.run('sort-imports', sortImports, { 15 | valid: [ 16 | { 17 | code: ` 18 | import a from 'a' 19 | import b from 'b' 20 | ` 21 | }, 22 | { 23 | code: ` 24 | import { a } from 'a' 25 | import { b } from 'b' 26 | ` 27 | }, 28 | { 29 | code: ` 30 | import { a } from 'a' 31 | import b from 'b' 32 | ` 33 | }, 34 | { 35 | code: ` 36 | import { a, b } from 'a' 37 | ` 38 | }, 39 | { 40 | code: ` 41 | import 'a' 42 | import b from 'b' 43 | ` 44 | }, 45 | { 46 | code: ` 47 | import 'a' 48 | import 'b' 49 | ` 50 | }, 51 | { 52 | code: ` 53 | import 'a' 54 | import * as b from 'b' 55 | ` 56 | }, 57 | { 58 | code: ` 59 | import * as a from 'a' 60 | import * as b from 'b' 61 | ` 62 | }, 63 | { 64 | code: ` 65 | import { a as b, c } from 'a' 66 | ` 67 | }, 68 | { 69 | code: ` 70 | import { a as c, b } from 'a' 71 | ` 72 | }, 73 | { 74 | code: ` 75 | import * as a from 'a' 76 | import * as b from 'b' 77 | ` 78 | } 79 | ], 80 | invalid: [ 81 | { 82 | code: ` 83 | import b from 'b' 84 | import a from 'a' 85 | `, 86 | errors: [errors.sortImportsAlphabetically] 87 | }, 88 | { 89 | code: ` 90 | import { b } from 'b' 91 | import { a } from 'a' 92 | `, 93 | errors: [errors.sortImportsAlphabetically] 94 | }, 95 | { 96 | code: ` 97 | import b from 'b' 98 | import { a } from 'a' 99 | `, 100 | errors: [errors.sortImportsAlphabetically] 101 | }, 102 | { 103 | code: ` 104 | import { b, a } from 'a' 105 | `, 106 | output: ` 107 | import { a, b } from 'a' 108 | `, 109 | errors: [errors.sortMembersAlphabetically] 110 | }, 111 | { 112 | code: ` 113 | import b from 'b' 114 | import 'a' 115 | `, 116 | errors: [errors.unexpectedSyntaxOrder] 117 | }, 118 | { 119 | code: ` 120 | import 'b' 121 | import 'a' 122 | `, 123 | errors: [errors.sortImportsAlphabetically] 124 | }, 125 | { 126 | code: ` 127 | import * as b from 'b' 128 | import 'a' 129 | `, 130 | errors: [errors.unexpectedSyntaxOrder] 131 | }, 132 | { 133 | code: ` 134 | import * as b from 'b' 135 | import * as a from 'a' 136 | `, 137 | errors: [errors.sortImportsAlphabetically] 138 | }, 139 | { 140 | code: ` 141 | import { c, a as b } from 'a' 142 | `, 143 | output: ` 144 | import { a as b, c } from 'a' 145 | `, 146 | errors: [errors.sortMembersAlphabetically] 147 | }, 148 | { 149 | code: ` 150 | import { b, a as c } from 'a' 151 | `, 152 | output: ` 153 | import { a as c, b } from 'a' 154 | `, 155 | errors: [errors.sortMembersAlphabetically] 156 | }, 157 | { 158 | code: ` 159 | import * as b from 'b' 160 | import * as a from 'a' 161 | `, 162 | errors: [errors.sortImportsAlphabetically] 163 | } 164 | ] 165 | }) 166 | -------------------------------------------------------------------------------- /index.js: -------------------------------------------------------------------------------- 1 | const getSortableName = specifier => specifier[!!specifier.imported ? 'imported' : 'local'].name.toLowerCase() 2 | const getFirstSortableName = node => (node.specifiers.length > 0 ? getSortableName(node.specifiers[0]) : null) 3 | 4 | module.exports = { 5 | rules: { 6 | 'sort-imports': { 7 | meta: { 8 | type: 'suggestion', 9 | docs: { 10 | description: 'enforce sorted import declarations within modules', 11 | category: 'ECMAScript 6', 12 | url: 'https://github.com/sergeyshpadyrev/eslint-plugin-beautiful-imports' 13 | }, 14 | schema: [ 15 | { 16 | type: 'object', 17 | properties: { 18 | allowSeparatedGroups: { 19 | type: 'boolean', 20 | default: false 21 | } 22 | }, 23 | additionalProperties: false 24 | } 25 | ], 26 | fixable: 'code', 27 | messages: { 28 | sortImportsAlphabetically: 'Imports should be sorted alphabetically.', 29 | sortMembersAlphabetically: 30 | "Member '{{memberName}}' of the import declaration should be sorted alphabetically.", 31 | unexpectedSyntaxOrder: "Expected order: imports without variables, '*' imports, regular imports" 32 | } 33 | }, 34 | 35 | create: context => { 36 | const configuration = context.options[0] || {} 37 | const sourceCode = context.getSourceCode() 38 | const allowSeparatedGroups = configuration.allowSeparatedGroups || false 39 | 40 | const getImportGroupIndex = node => 41 | node.specifiers.length === 0 ? 0 : node.specifiers[0].type === 'ImportNamespaceSpecifier' ? 1 : 2 42 | 43 | let previousDeclaration = null 44 | 45 | return { 46 | ImportDeclaration: node => { 47 | if ( 48 | allowSeparatedGroups && 49 | previousDeclaration && 50 | Math.max(node.loc.start.line - previousDeclaration.loc.end.line - 1, 0) > 0 51 | ) 52 | previousDeclaration = null 53 | 54 | if (previousDeclaration) { 55 | const currentMemberSyntaxGroupIndex = getImportGroupIndex(node) 56 | const previousMemberSyntaxGroupIndex = getImportGroupIndex(previousDeclaration) 57 | const currentLocalMemberName = getFirstSortableName(node) 58 | const previousLocalMemberName = getFirstSortableName(previousDeclaration) 59 | 60 | if (currentMemberSyntaxGroupIndex !== previousMemberSyntaxGroupIndex) { 61 | if (currentMemberSyntaxGroupIndex < previousMemberSyntaxGroupIndex) 62 | context.report({ 63 | node, 64 | messageId: 'unexpectedSyntaxOrder' 65 | }) 66 | } else { 67 | if ( 68 | previousLocalMemberName && 69 | currentLocalMemberName && 70 | currentLocalMemberName < previousLocalMemberName 71 | ) 72 | context.report({ 73 | node, 74 | messageId: 'sortImportsAlphabetically' 75 | }) 76 | 77 | if ( 78 | node.specifiers.length === 0 && 79 | previousDeclaration.specifiers.length === 0 && 80 | node.source.value.toLowerCase() < previousDeclaration.source.value.toLowerCase() 81 | ) 82 | context.report({ 83 | node, 84 | messageId: 'sortImportsAlphabetically' 85 | }) 86 | } 87 | } 88 | 89 | previousDeclaration = node 90 | 91 | const importSpecifiers = node.specifiers.filter( 92 | specifier => specifier.type === 'ImportSpecifier' 93 | ) 94 | 95 | const firstUnsortedIndex = importSpecifiers 96 | .map(getSortableName) 97 | .findIndex((name, index, array) => array[index - 1] > name) 98 | 99 | if (firstUnsortedIndex !== -1) 100 | context.report({ 101 | node: importSpecifiers[firstUnsortedIndex], 102 | messageId: 'sortMembersAlphabetically', 103 | data: { memberName: importSpecifiers[firstUnsortedIndex].local.name }, 104 | fix: fixer => { 105 | if ( 106 | importSpecifiers.some( 107 | specifier => 108 | sourceCode.getCommentsBefore(specifier).length || 109 | sourceCode.getCommentsAfter(specifier).length 110 | ) 111 | ) 112 | return null 113 | 114 | return fixer.replaceTextRange( 115 | [ 116 | importSpecifiers[0].range[0], 117 | importSpecifiers[importSpecifiers.length - 1].range[1] 118 | ], 119 | importSpecifiers 120 | .slice() 121 | .sort((specifierA, specifierB) => 122 | getSortableName(specifierA) > getSortableName(specifierB) ? 1 : -1 123 | ) 124 | .reduce((sourceText, specifier, index) => { 125 | const textAfterSpecifier = 126 | index === importSpecifiers.length - 1 127 | ? '' 128 | : sourceCode 129 | .getText() 130 | .slice( 131 | importSpecifiers[index].range[1], 132 | importSpecifiers[index + 1].range[0] 133 | ) 134 | 135 | return sourceText + sourceCode.getText(specifier) + textAfterSpecifier 136 | }, '') 137 | ) 138 | } 139 | }) 140 | } 141 | } 142 | } 143 | } 144 | } 145 | } 146 | --------------------------------------------------------------------------------