Skip to content

Commit e4a1165

Browse files
lolcubeDavid Kainz
andauthored
docs: update readme to include Intellij / Webstorm workaround for resolving aliases (#410)
Co-authored-by: David Kainz <[email protected]>
1 parent 8a3ac0f commit e4a1165

File tree

1 file changed

+21
-4
lines changed

1 file changed

+21
-4
lines changed

README.md

Lines changed: 21 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -60,7 +60,7 @@ const plugins = [
6060
"test": "./test"
6161
}
6262
}
63-
63+
6464
]
6565
6666
];
@@ -77,12 +77,11 @@ Are you a plugin author (e.g. IDE integration)? We have [documented the exposed
7777

7878
## ESLint plugin
7979

80-
If you're using ESLint, you should use [eslint-plugin-import][eslint-plugin-import], and [eslint-import-resolver-babel-module][eslint-import-resolver-babel-module] to remove falsy unresolved modules. If you want to have warnings when aliased modules are being imported by their relative paths, you can use [eslint-plugin-module-resolver](https://github.com/HeroProtagonist/eslint-plugin-module-resolver).
80+
If you're using ESLint, you should use [eslint-plugin-import][eslint-plugin-import], and [eslint-import-resolver-babel-module][eslint-import-resolver-babel-module] to remove falsy unresolved modules. If you want to have warnings when aliased modules are being imported by their relative paths, you can use [eslint-plugin-module-resolver](https://github.com/HeroProtagonist/eslint-plugin-module-resolver).
8181

8282
## Editors autocompletion
8383

8484
- Atom: Uses [atom-autocomplete-modules][atom-autocomplete-modules] and enable the `babel-plugin-module-resolver` option.
85-
- IntelliJ/WebStorm: You can add custom resources root directories, make sure it matches what you have in this plugin.
8685
- VS Code: Configure the [path mapping](https://www.typescriptlang.org/docs/handbook/module-resolution.html#path-mapping) in `jsconfig.json` (`tsconfig.json` for TypeScript), e.g.:
8786

8887
```js
@@ -98,6 +97,24 @@ If you're using ESLint, you should use [eslint-plugin-import][eslint-plugin-impo
9897
}
9998
```
10099

100+
- IntelliJ/WebStorm: You can mark your module directories as "resources root" e.g if you have `../../../utils/MyUtilFn` you can mark
101+
`../../../utils` as "resources root". This has the problem that your alias also has to be named `utils`. The second option is to add
102+
a `webpack.config.js` to your project and use it under File->Settings->Languages&Frameworks->JavaScript->Webpack. This will trick webstorm
103+
into resolving the paths and you can use any alias you want e.g.:
104+
105+
```js
106+
var path = require('path');
107+
108+
module.exports = {
109+
resolve: {
110+
extensions: ['.js', '.json', '.vue'],
111+
alias: {
112+
utils: path.resolve(__dirname, '../../../utils/MyUtilFn'),
113+
},
114+
},
115+
};
116+
```
117+
101118

102119
## License
103120

@@ -110,7 +127,7 @@ MIT, see [LICENSE.md](/LICENSE.md) for details.
110127
- AppDirect
111128
- Callstack: [React Native Paper](https://github.com/callstack/react-native-paper)
112129
- Codility
113-
- Eleme: [Element](https://github.com/ElemeFE/element)
130+
- Eleme: [Element](https://github.com/ElemeFE/element)
114131
- Expo: [Expo SDK](https://github.com/expo/expo/tree/master/packages/babel-preset-expo)
115132
- FormidableLabs: [Victory Native](https://github.com/FormidableLabs/victory-native)
116133
- OpenCollective: [OpenCollective](https://github.com/opencollective/frontend)

0 commit comments

Comments
 (0)