Validates imports of typescripts globally declared modules
When you declare modules with typescript, filepaths are not validated to be correct.
Example:
declare module '*.module.css' {
const classes: { [key: string]: string };
export default classes;
}
declare module '*.module.scss' {
const classes: { [key: string]: string };
export default classes;
}
declare module '*.module.sass' {
const classes: { [key: string]: string };
export default classes;
}
declare module '*.module.less' {
const classes: { [key: string]: string };
export default classes;
}
declare module '*.module.styl' {
const classes: { [key: string]: string };
export default classes;
}
This will not throw an error, even though path is incorrect:
import styles from 'asdasdasdasdasd.module.css';
You'll first need to install ESLint:
npm i eslint --save-dev
Next, install eslint-plugin-validate-declared-imports
:
npm install eslint-plugin-validate-declared-imports --save-dev
or with yarn:
yarn add -D eslint-plugin-validate-declared-imports
Add validate-declared-imports
to the plugins section of your .eslintrc
configuration file. You can omit the eslint-plugin-
prefix:
{
"plugins": [
"validate-declared-imports"
]
}
Then configure the rules you want to use under the rules section.
{
"rules": {
"validate-declared-imports/no-unresolved-declared-imports":
["error", {
"fileExtensions": [
// Asset files: png, jpeg, svg...
".jpg",
// Style files
".module.css", // CSS Modules
".module.scss", // SCSS Modules
".module.less", // Less Modules
".st.css" // Stylable files
]
}
]
}
}