Recently, I've started incorporating TypeScript into an existing JavaScript project. The project is quite large, so I've decided to transition it to TypeScript gradually.
Below is a snippet from my eslintrc.js file:
module.exports = {
parser: '@typescript-eslint/parser',
extends: [
'plugin:@typescript-eslint/recommended',
'airbnb-typescript/base',
'plugin:import/errors',
'plugin:import/warnings',
'plugin:import/typescript',
'plugin:prettier/recommended',
'prettier/@typescript-eslint'
],
parserOptions: {
ecmaVersion: 2018,
sourceType: 'module'
},
settings: {
'import/resolver': {
node: {
extensions: ['.js', '.jsx', '.ts', '.tsx']
}
}
},
rules: {},
plugins: ['prettier']
};
One issue I'm facing is that Prettier does not format my code on save. Below is the error message from the Prettier log:
["ERROR" - 12:34:20 PM] Error formatting document.
Failed to load plugin '@typescript-eslint' declared in 'CLIOptions': Cannot find module '@typescript-eslint/eslint-plugin'
I attempted to resolve this by running
npm install @typescript-eslint --save-devCan someone provide guidance on how to optimize my eslintrc configuration to address this issue? Please note that the configuration should be compatible with both TypeScript and JavaScript files.