{"id":3645,"date":"2021-04-13T15:54:58","date_gmt":"2021-04-13T15:54:58","guid":{"rendered":"https:\/\/ionicframework.com\/blog\/?p=3645"},"modified":"2021-04-13T16:54:19","modified_gmt":"2021-04-13T16:54:19","slug":"eslint-for-ionic-angular","status":"publish","type":"post","link":"https:\/\/ionic.io\/blog\/eslint-for-ionic-angular","title":{"rendered":"ESLint for Ionic Angular"},"content":{"rendered":"

Today I’m happy to share that Ionic’s starter projects now ship<\/a> with modern linting, powered by ESLint<\/a>. 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.<\/p>\n

Sunsetting TSLint<\/h2>\n

If you were looking for a linting tool for a TypeScript<\/a> project, chances are you ended up using TSLint<\/a>. TSLint was a static analysis tool that would check a TypeScript code base to enforce a consistent code style and make sure the project didn’t break any rules, aka your standard linting tool. Now, TSLint isn’t the only tool in this space. Another linting tool that was the de facto standard in JavaScript projects was ESLint. ESLint and TSLint provided a similar set of features, but ESLint didn’t have support for TypeScript.<\/p>\n

Fast forward to 2019, and the landscape was starting to look different. The TypeScript community was looking to improve the tooling landscape and provide a more unified experience for TypeScript and JavaScript devs. The maintainers of TSLint took this opportunity to announce the deprecation of TSLint and plans to help support ESLint as the<\/strong> linter for both TypeScript and JavaScript.<\/p>\n

Now in 2021, the TSLint repo has been archived and the TypeScript-ESLint<\/a> team, headed up by James Henry<\/a> and others, have been working to support developers.<\/p>\n

<\/p>\n

From one linting tool to another<\/h2>\n

With the history listed out of the way, let’s upgrade a project to use ESLint. This process can be done manually, but why do that when we can automate it. For most projects, the quickest way to upgrade is to use Angular-ESLint<\/a> and run their schematics. First commit any open changes and make a new branch (just to be sure):<\/p>\n

git add .\ngit commit -m "pre eslint"\ngit checkout -b feat-eslint\n<\/code><\/pre>\n
Then we can add the schematics for Angular-ESLint<\/p>\n
ng add @angular-eslint\/schematics\n<\/code><\/pre>\n
From here, we can convert our existing TSLint config to ESLint with the following command:<\/p>\n
ng g @angular-eslint\/schematics:convert-tslint-to-eslint {{YOUR_PROJECT_NAME_GOES_HERE}}\n<\/code><\/pre>\n
Once this is done, you can run ESLint against your project! The schematic won\u2019t remove TSLint from your package.json or the tslint.json from your project. These can be removed:<\/p>\n
rm tslint.json\nnpm uninstall tslint\n<\/code><\/pre>\n
Commit your changes and make send one sweet pull request!<\/p>\n
Where do we go now?<\/h2>\n
With ESLint installed and configured, projects can make use of the extensive ecosystem of plugins available, like Prettier. With new Ionic Angular projects using ESLint, you can rest assured knowing you will have stable tools for the future of your development. A huge thank you to James Henry<\/a> and Brad Zacher<\/a> for building and maintaining TypeScript-ESLint and Angular-ESLint.<\/p>\n