Menu
I'm using react with the simple-import-sort eslint plugin. I think my .eslintrc.js is right, but I'm not able to make this specific plugin work. I get the following errors at the first line of my files:
Definition for rule 'simple-import-sort/sort' was not found simple-import-sort/sort
Here's my config:
module.exports = {
parser: '@typescript-eslint/parser',
extends: [
'eslint:recommended',
'airbnb-typescript',
'airbnb/hooks',
'plugin:@typescript-eslint/recommended',
'plugin:@typescript-eslint/recommended-requiring-type-checking',
'plugin:import/recommended',
'plugin:jest/recommended',
'plugin:jsx-a11y/recommended',
'plugin:prettier/recommended',
'plugin:react/recommended',
'prettier',
'prettier/@typescript-eslint',
'prettier/react',
],
parserOptions: {
ecmaVersion: 2018,
sourceType: 'module',
ecmaFeatures: {
jsx: true,
},
project: './tsconfig.json',
},
ignorePatterns: ['*.js'],
plugins: ['react', 'prettier', 'import', 'simple-import-sort'],
rules: {
'prettier/prettier': ['error'],
'no-underscore-dangle': 'off',
'no-async-promise-executor': 'warn',
'no-unused-vars': 'error',
'object-shorthand': ["error", "always"],
'react/destructuring-assignment': ['off', 'never'],
'react/jsx-filename-extension': ['warn', { extensions: ['.tsx', '.js', '.jsx'] }],
'react/jsx-uses-react': 'error',
'react/jsx-uses-vars': 'error',
'react/no-unescaped-entities': 'off',
'react/jsx-no-undef': ['error', { allowGlobals: true }],
'react/jsx-props-no-spreading': 'warn',
'react/prop-types': 'off',
'react-hooks/exhaustive-deps': 'off',
'sort-imports': 'off',
'simple-import-sort/sort': 'error',
'import/order': 'off',
'import/prefer-default-export': 'off',
'import/extensions': 'off',
'import/no-extraneous-dependencies': ['error', { devDependencies: true }],
// '@typescript-eslint/camelcase': ['error', { properties: 'never' }],
'@typescript-eslint/no-var-requires': 'off',
'@typescript-eslint/explicit-function-return-type': 'off',
'jsx-a11y/anchor-is-valid': 'off',
'jsx-a11y/no-static-element-interactions': 'off',
},
};
387
import-sort is a set of packages that allow you to sort your ES2015 (aka ES6) imports. Both JavaScript and TypeScript files are supported.
You can run the extension using the shortcut Ctrl + Alt + O , or you can use the command palette Ctrl + Shift + P -> Dart: Sort Imports .
Add "simple-import-sort" to "plugins" in your .eslintrc: Then add the rules for sorting imports and exports: Make sure not to use other sorting rules at the same time: Note: There used to be a rule called "simple-import-sort/sort". Since version 6.0.0 it’s called "simple-import-sort/imports".
Note: There used to be a rule called "simple-import-sort/sort". Since version 6.0.0 it’s called "simple-import-sort/imports". This example uses eslint-plugin-import, which is optional. It is recommended to also set up Prettier, to help formatting your imports (and all other code) nicely.
When true the rule checks the sorting of import declaration statements only for those that appear on consecutive lines. 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.
For completeness, sorting the imported/exported items of an import is always safe: Note: import {} from "wherever" is not treated as a side effect import. Finally, there’s one more thing to know about exports. Consider this case: What happens if you run main.js? In Node.js and browsers the result is:
Form Version 6.0.0 of eslint-plugin-simple-import-sort:
{
"rules": {
"simple-import-sort/imports": "error",
"simple-import-sort/exports": "error"
}
}
It may be that you're using v6.
It looks like v6 doesn't have a simple-import-sort/sort rule, see usage in the README. This was a change from v5 on Nov 15.
You probably need to make the following change:
- 'simple-import-sort/sort': 'error',
+ 'simple-import-sort/imports': 'error',
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
