--- title: "Angular Upgrades: Painless Migration from TSLint to ESLint" description: Angular upgrades can be scary! Migrate from TSLint to ESLint in less time than you think using tools from the Angular community. image: https://www.bitovi.com/hubfs/eslint-logo.png --- - ![AI implementation](https://www.bitovi.com/hubfs/AIConsultingIcon.svg) [AI implementation](https://www.bitovi.com/services/ai-consulting) - ![Systems engineering](https://www.bitovi.com/hubfs/icon%20-%20backend.svg) [Systems engineering](https://www.bitovi.com/services/systems-engineering-consulting) - ![Project Management](https://www.bitovi.com/hubfs/icon%20-%20PM.svg) [Project Management](https://www.bitovi.com/services/agile-project-management-consulting) - ![Product Design](https://www.bitovi.com/hubfs/icon%20-%20design.svg) [Product Design](https://www.bitovi.com/services/product-design-consulting) - ![Frontend development](https://www.bitovi.com/hubfs/icon%20-%20frontend.svg) [Frontend development](https://www.bitovi.com/services/frontend-development-consulting) - [View more → ](https://www.bitovi.com/digital-consulting-services) We're Experts in... - [JavaScript](https://www.bitovi.com/services/frontend/javascript-consulting) - [AI training](https://www.bitovi.com/ai-training-for-software-engineers) - [Angular](https://www.bitovi.com/services/frontend/angular-consulting) - [Design systems](https://www.bitovi.com/services/axure-figma-migration) - [React](https://www.bitovi.com/services/frontend/react-consulting) - [Temporal](https://www.bitovi.com/services/backend/temporal-consulting) - [React Native](https://www.bitovi.com/services/frontend/react-consulting/react-native) - [Node.js](https://www.bitovi.com/services/backend/nodejs-consulting) Showcase ![Yum! Brands](https://www.bitovi.com/hubfs/yum-showcase-link-1.png) [View case study](https://www.bitovi.com/en/bitovi-yum-case-study) More Projects - [![Levi's](https://www.bitovi.com/hubfs/levis.svg)](https://www.bitovi.com/web-application-consulting-work/levis-ecommerce-responsive-redesign) - [![Christie's International Real Estate](https://www.bitovi.com/hubfs/christies.svg)](https://design.bitovi.com/christies) - [![BAFS](https://www.bitovi.com/hubfs/bafs.svg)](https://www.bitovi.com/ux-design-consulting/ux-case-studies/bafs-ppp) - [View more → ](https://www.bitovi.com/our-software-consulting-work) Open Source Tools We build powerful tools and open source them to support the community. [See what we've built →](https://www.bitovi.com/open-source) - [![Blog](https://www.bitovi.com/hubfs/icon%20-%20blog.svg) BlogWe post about delivering products and solving problems. ](https://www.bitovi.com/blog) - [![Partnerships](https://www.bitovi.com/hubfs/Handshake-1.svg) PartnershipsLearn about Bitovi's technology partners ](https://www.bitovi.com/partnerships) - [![Academy](https://www.bitovi.com/hubfs/icon%20-%20academy%20(4).svg) AcademyFree courses to build delivery skills ](https://www.bitovi.com/academy) - [![Open source tools](https://www.bitovi.com/hubfs/icon%20-%20open%20source.svg) Open source toolsUse or contribute to our community ](https://www.bitovi.com/open-source) Let's Connect - [![Discord](https://www.bitovi.com/hubfs/DiscordLogo.svg) Discord ](https://discord.gg/J7ejFsZnJ4) - [![LinkedIn](https://www.bitovi.com/hubfs/LinkedinLogo.svg) LinkedIn ](https://www.linkedin.com/company/bitovi/) - [![GitHub](https://www.bitovi.com/hubfs/GithubLogo.svg) GitHub ](https://github.com/bitovi/) ![Eggbot](https://www.bitovi.com/hubfs/build_assets/bitovi-limbo-cms-react/338/js_client_assets/assets/eggbot-LTGhdSGL.png) Name * Work Email * Phone What's your project? Send ### Contact Us (312) 620-0386contact@bitovi.com [ Angular ](https://www.bitovi.com/blog/topic/angular) | February 5, 2021 # Angular Upgrades: Painless Migration from TSLint to ESLint Angular upgrades can be scary! Migrate from TSLint to ESLint in less time than you think using tools from the Angular community. ![Jonathan Spickerman](https://www.bitovi.com/hubfs/People/jonathan-spickerman.jpg) Jonathan Spickerman Share: [![Twitter](https://www.bitovi.com/hubfs/limbo-generated/_astro/twitter-white.os3xLc3C_Z2nW4or.svg) ](https://twitter.com/intent/tweet?text=) [![Reddit](https://www.bitovi.com/hubfs/limbo-generated/imgs/icons/reddit.png) ](http://reddit.com/submit?url=) Linting: the spell check of code. Once you have it, you can’t imagine how you ever lived without it. Useful for solo developers and large teams, linting keeps your code consistent and prevents bugs from getting anywhere near your production build.  Before Angular 11, linting was supported via a library called [TSLint](https://github.com/palantir/tslint). However, the TSLint team [deprecated the project](https://medium.com/palantir/tslint-in-2019-1a144c2317a9) in 2019 and Angular [followed suit in November 2020](https://blog.angular.io/version-11-of-angular-now-available-74721b7952f7). Fortunately, thanks to tools from the Angular ecosystem migrating to [ESLint](https://eslint.org/) is easier than you think. > Want to jump straight to how to migrate from TSLint to ESLint? [Click here](https://www.bitovi.com/blog/angular-upgrades-painless-migration-from-tslint-to-eslint#migrating-an-existing-angular-project) **Lint? Like Dryer Lint?** Linting is a process which checks your code for adherence to a defined set of style rules. Common linting rules are restrictions on line length or whitespace, as well as syntax checks like semicolons at the end of lines. Amusingly, the term is derived from the same fuzzy lint that clogs up your dryer. Just like a dryer’s lint trap catches bits of fluff that could accumulate and burn your house down, a code linter catches small errors that might crash your website. **Why Replace TSLint?** TSLint has been around for years, why are things changing now? A big reason: ESLint is compatible with both JavaScript and TypeScript. This makes jumping between the two languages a bit easier, especially for new developers. The core concept of TypeScript is a 100% compatible superset of JavaScript, so parity in tooling keeps the two languages in step. I’ll add that I find ESLint’s config structure to be a bit easier to read. TSLint also has a dependency on [Codelyzer](https://www.npmjs.com/package/codelyzer), where ESLint does not. The TSLint team has a [great write up](https://medium.com/palantir/tslint-in-2019-1a144c2317a9) on the move to ESLint. Migrations of this sort often send chills down developers’ spines. Perhaps you’ve spent years tweaking your linting settings so they’re *just right*. Now you have to do it all over again? Definitely not! We’ll use [angular-eslint](https://github.com/angular-eslint/angular-eslint) to make migration a breeze. **Migrating an Existing Angular 10+ Project** The community-driven library [angular-eslint](https://github.com/angular-eslint/angular-eslint) provides an awesome set of [schematics](https://angular.io/guide/schematics) for migrating your existing Angular projects to ESLint. Currently, **only Angular 10.1.0 is supported**. If your project is running an older version of Angular, come back to this blog once you’ve upgraded. The biggest practical difference between TSLint and ESLint is the format of their configuration file, which stores the rules the linter uses to validate your code. We’ll also need to update Angular to use ESLint when we run “ng lint”. Fortunately, angular-eslint’s schematic handles both of these changes! A quick note: the changes below will update your angular.json file. Unless you have your project configuration memorized, I recommend backing up this file or making these changes in a dedicated branch, just in case! For testing purposes, I’d also suggest writing a few lines of code that will intentionally throw linting errors. To install the schematics, navigate to the root of your project and run the following [Angular CLI ](https://angular.io/cli)command: `ng add @angular-eslint/schematics` Next, run the following to generate a new ESLint file based on the contents of your project’s existing TSLint config: `ng g @angular-eslint/schematics:convert-tslint-to-eslint` If you see any errors in the terminal, it is likely that ESLint was [unable to map a rule](https://github.com/angular-eslint/angular-eslint#step-2---run-the-convert-tslint-to-eslint-schematic-on-a-project). Your experience may vary depending on the degree of customization in your TSLint configuration. Once complete, you should see a new “.eslintrc.json” file at the root of your project and your angular.json “lint” sections should now reference @angular-eslint. To test, run the following command from your project. `ng lint` That’s it! You should see linting run against your codebase using the same rules previously used by TSLint. **Wait, why is this new ESLint config so short?** If you’re used to using the tslint.json shipped with Angular, the newly generated ESLint config file may seem suspiciously short. This is mostly a result of the angular-eslint library, which provides you with an “override” linting file for adding project level rules while tucking away most of the boilerplate Angular config.  I personally love this approach, as it makes it much easier to find project-level linting rules. More info on properly customizing ESLint can be found on the [angular-eslint GitHub page](https://github.com/angular-eslint/angular-eslint). When you’re confident that your new ESLint configuration is to your liking, feel free to remove TSLint and Codelyzer from your project. **Using ESLint for a New Angular Project** As of the publication of this blog, the Angular CLI still configures new projects for use with TSLint. If you’d like to create a new project with ESLint instead, you can leverage angular-eslint’s schematics using the following command: `ng new --collection=@angular-eslint/schematics` This schematic runs after your new project is created, mapping the default TSLint configuration file to a new ESLint file and updating your project’s angular.json (it may take a few seconds to complete). **Wrap-up** Linting is an indispensable tool for producing quality code, and the migration to ESLint ensures our Angular projects will continue to stay neat and tidy as the TypeScript ecosystem evolves. ### Do you have thoughts? [![discord-mark-blue](https://www.bitovi.com/hs-fs/hubfs/discord-mark-blue.png?width=69&height=52&name=discord-mark-blue.png) ](https://discord.gg/J7ejFsZnJ4)We’d love to hear them! Join our [Community Discord](https://discord.gg/J7ejFsZnJ4) to continue the ESLint conversation. Still have questions about migrating to ESLint? Experiencing other [Angular upgrade](https://www.bitovi.com/why-build-with-angular) headaches? We’d love to help! Send us an email at [contact@bitovi.com](mailto:contact@bitovi.com). [![Tag for development](https://www.bitovi.com/hubfs/limbo/icons/tag.svg) development ](https://www.bitovi.com/blog/topic/development)[![Tag for angular upgrades](https://www.bitovi.com/hubfs/limbo/icons/tag.svg) angular upgrades ](https://www.bitovi.com/blog/topic/angular-upgrades) Previous Post ![](https://www.bitovi.com/hs-fs/hubfs/banner_paraglide.jpg?height=117&name=banner_paraglide.jpg) [ Prepare for Anything with GSAP ](https://www.bitovi.com/blog/prepare-for-anything-with-gsap)   Next Post ![](https://www.bitovi.com/hubfs/react-logo.svg) [ RxJS with React: Actions and Subjects (Part 2) ](https://www.bitovi.com/blog/rxjs-with-react-pt-2) ```json { "@context" : "http://schema.org", "@type" : "Organization", "address" : { "@type" : "PostalAddress", "addressCountry" : "United States", "addressLocality" : "Libertyville", "addressRegion" : "IL", "postalCode" : "60048", "streetAddress" : "1134 Pine Tree Lane " }, "alternateName" : "Bitovi", "areaServed" : { "@type" : "GeoCircle", "geoMidpoint" : { "@type" : "GeoCoordinates", "latitude" : "41.8781", "longitude" : "87.6298" }, "geoRadius" : "5000 km" }, "description" : "Bitovi is a UX, UI design and front-end JavaScript development consulting company", "email" : "contact@bitovi.com", "image" : "https://www.bitovi.com/hubfs/bitovi-logo-x2.png", "logo" : "https://www.bitovi.com/hubfs/bitovi-logo-23-1.svg", "mainEntityOfPage" : { "@id" : "https://www.bitovi.com/blog/angular-upgrades-painless-migration-from-tslint-to-eslint", "@type" : "WebPage", "description" : "Angular upgrades can be scary! Migrate from TSLint to ESLint in less time than you think using tools from the Angular community." }, "naics" : "541511", "name" : "Bitovi Web App Consulting", "sameAs" : [ "https://www.facebook.com/BitoviLLC/", "https://twitter.com/bitovi", "https://www.linkedin.com/company/bitovi" ], "telephone" : "312-620-0386", "url" : "http://bitovi.com" } ``` ```json { "@context" : "http://schema.org", "@type" : "BlogPosting", "author" : { "@type" : "Person", "name" : "Jonathan Spickerman" }, "dateModified" : "February 22, 2023, 6:50:17 PM", "datePublished" : "2021-02-05 17:58:25", "description" : "Angular upgrades can be scary! Migrate from TSLint to ESLint in less time than you think using tools from the Angular community.", "headline" : "Angular Upgrades: Painless Migration from TSLint to ESLint", "image" : { "@type" : "ImageObject", "url" : "https://www.bitovi.com/hubfs/eslint-logo.png" }, "publisher" : { "@type" : "Organization", "logo" : { "@type" : "ImageObject", "url" : "https://www.bitovi.com/hubfs/bitovi-logo-23-1.svg" }, "name" : "Bitovi" } } ```