Originally published at: ESLint for Ionic Angular - Ionic Blog
Today I’m happy to share that Ionic’s starter projects now ship with modern linting, powered by ESLint. This gives us a consistent linting tool across all project types, but also removes a deprecated dependency. Let’s dive in and rewind the clock to 2018. Sunsetting TSLint If you were looking for a linting tool for a…
According to this configuration, WebStorm prompts me
ESLint: Specify the path of the’eslint’ package
I am a loyal fan of ionic and I have been using it, how can I solve this, I didn’t use ESLint before,
@mhartington
{
“name”: “utsource”,
“version”: “5.4.1”,
“author”: “张玉海”,
“homepage”: “https://mob.utsource.net/”,
“scripts”: {
“ng”: “ng”,
“start”: “ionic serve --hmr”,
“build”: “ng build”,
“test”: “ng test”,
“lint”: “ng lint”,
“e2e”: “ng e2e”
},
“private”: true,
“dependencies”: {
“@angular/common”: “^11.2.8”,
“@angular/core”: “^11.2.8”,
“@angular/forms”: “^11.2.8”,
“@angular/platform-browser”: “^11.2.8”,
“@angular/platform-browser-dynamic”: “^11.2.8”,
“@angular/router”: “^11.2.8”,
“@ionic-native/app-version”: “^5.32.0”,
“@ionic-native/camera”: “^5.32.0”,
“@ionic-native/code-push”: “^5.32.0”,
“@ionic-native/core”: “^5.32.0”,
“@ionic-native/facebook”: “^5.32.0”,
“@ionic-native/file”: “^5.32.0”,
“@ionic-native/file-chooser”: “^5.32.0”,
“@ionic-native/file-transfer”: “^5.32.0”,
“@ionic-native/geolocation”: “^5.32.0”,
“@ionic-native/google-plus”: “^5.31.1”,
“@ionic-native/in-app-browser”: “^5.32.0”,
“@ionic-native/qr-scanner”: “^5.32.0”,
“@ionic-native/social-sharing”: “^5.31.1”,
“@ionic-native/splash-screen”: “^5.31.1”,
“@ionic-native/status-bar”: “^5.31.1”,
“@ionic-native/toast”: “^5.31.1”,
“@ionic/angular”: “^5.6.1”,
“@ionic/storage”: “^2.3.0”,
“@ngx-translate/core”: “^13.0.0”,
“@ngx-translate/http-loader”: “^6.0.0”,
“cordova-android”: “9.0.0”,
“cordova-ios”: “6.1.1”,
“cordova-plugin-app-version”: “0.1.9”,
“cordova-plugin-code-push”: “^2.0.0”,
“cordova-plugin-compat”: “^1.2.0”,
“cordova-plugin-device”: “^2.0.3”,
“cordova-plugin-facebook4”: “^6.4.0”,
“cordova-plugin-file”: “^6.0.2”,
“cordova-plugin-file-transfer”: “^1.7.1”,
“cordova-plugin-filechooser”: “1.2.0”,
“cordova-plugin-googleplus”: “^8.5.2”,
“cordova-plugin-ionic-keyboard”: “^2.2.0”,
“cordova-plugin-ionic-webview”: “^5.0.0”,
“cordova-plugin-splashscreen”: “^6.0.0”,
“cordova-plugin-statusbar”: “^2.4.3”,
“cordova-plugin-x-socialsharing”: “^6.0.3”,
“cordova-plugin-x-toast”: “2.7.2”,
“cordova-plugin-zip”: “^3.1.0”,
“core-js”: “^3.10.0”,
“echarts”: “^5.0.2”,
“rxjs”: “^6.6.7”,
“tslib”: “^2.2.0”,
“zone.js”: “^0.11.4”
},
“devDependencies”: {
“@angular-devkit/architect”: “^0.1102.7”,
“@angular-devkit/build-angular”: “^0.1102.7”,
“@angular-devkit/core”: “^11.2.7”,
“@angular-devkit/schematics”: “^11.2.7”,
“@angular-eslint/builder”: “2.1.0”,
“@angular-eslint/eslint-plugin”: “2.1.0”,
“@angular-eslint/eslint-plugin-template”: “2.1.0”,
“@angular-eslint/schematics”: “2.1.0”,
“@angular-eslint/template-parser”: “2.1.0”,
“@angular/cli”: “11.2.7”,
“@angular/compiler”: “^11.2.8”,
“@angular/compiler-cli”: “^11.2.8”,
“@angular/language-service”: “^11.2.8”,
“@ionic/angular-toolkit”: “^3.1.1”,
“@types/jasmine”: “^3.6.7”,
“@types/jasminewd2”: “~2.0.6”,
“@types/node”: “^14.14.37”,
“@typescript-eslint/eslint-plugin”: “4.16.1”,
“@typescript-eslint/parser”: “4.16.1”,
“code-push”: “^3.1.5”,
“codelyzer”: “^6.0.1”,
“cordova-plugin-advanced-http”: “^3.1.0”,
“cordova-plugin-camera”: “^5.0.1”,
“cordova-plugin-dialogs”: “^2.0.2”,
“cordova-plugin-inappbrowser”: “^5.0.0”,
“cordova-plugin-whitelist”: “^1.3.4”,
“eslint”: “^7.6.0”,
“eslint-plugin-import”: “2.22.1”,
“eslint-plugin-jsdoc”: “30.7.6”,
“eslint-plugin-prefer-arrow”: “1.2.2”,
“jasmine-core”: “~3.6.0”,
“jasmine-spec-reporter”: “~6.0.0”,
“karma”: “~5.2.3”,
“karma-chrome-launcher”: “~3.1.0”,
“karma-coverage-istanbul-reporter”: “~3.0.2”,
“karma-jasmine”: “^4.0.1”,
“karma-jasmine-html-reporter”: “^1.5.4”,
“protractor”: “~7.0.0”,
“ts-node”: “~9.0.0”,
“typescript”: “~4.1.5”
},
“description”: “An Ionic project”,
“cordova”: {
“plugins”: {
“cordova-plugin-device”: {},
“cordova-plugin-ionic-keyboard”: {},
“cordova-plugin-filechooser”: {},
“cordova-plugin-x-toast”: {},
“cordova-plugin-app-version”: {},
“cordova-plugin-zip”: {},
“cordova-plugin-file”: {},
“cordova-plugin-facebook4”: {
“APP_ID”: “1543677069111040”,
“APP_NAME”: “Utsource”,
“FACEBOOK_HYBRID_APP_EVENTS”: “false”,
“FACEBOOK_ANDROID_SDK_VERSION”: “5.13.0”
},
“cordova-plugin-x-socialsharing”: {},
“cordova-plugin-code-push”: {},
“cordova-plugin-ionic-webview”: {},
“cordova-plugin-statusbar”: {},
“cordova-plugin-file-transfer”: {},
“cordova-plugin-splashscreen”: {},
“cordova-plugin-whitelist”: {},
“cordova-plugin-camera”: {
“ANDROID_SUPPORT_V4_VERSION”: “27.+”
},
“cordova-plugin-inappbrowser”: {}
},
“platforms”: [
“ios”,
“android”
]
}
}
Ok!
What ide do you use now?
Are you using Visual Studio Code?
Vim! But Vscode should still behave the same
A more “correct” setup should be
tsconfig.app.json
{
"extends": "./tsconfig.json",
"compilerOptions": {
"outDir": "./out-tsc/app",
"types": []
},
"files": ["src/main.ts", "src/polyfills.ts"],
"include": ["src/**/*.d.ts"]
}
tsconfig.json
{
"compileOnSave": false,
"compilerOptions": {
"baseUrl": "./",
"outDir": "./dist/out-tsc",
"sourceMap": true,
"declaration": false,
"downlevelIteration": true,
"experimentalDecorators": true,
"moduleResolution": "node",
"importHelpers": true,
"target": "es2015",
"module": "es2020",
"lib": ["es2018", "dom"]
},
"angularCompilerOptions": {
"enableI18nLegacyMessageIdFormat": false,
"strictInjectionParameters": true,
"strictInputAccessModifiers": true,
"strictTemplates": true
}
}
You might want to try this guide Webstorm Eslint. Seems like Webstorm needs some additional Setup to lint typescript with eslint. That solved it for me.