Create an Angular app with ESLint & Tailwind CSS in seconds

Introduction

I’ve started a couple of personal projects recently and have noticed just how long it takes to configure my Angular projects exactly how I want them. Installing and configuring things like Tailwind and ESLint should be quick and…


This content originally appeared on DEV Community and was authored by Josh Hills

Introduction

I've started a couple of personal projects recently and have noticed just how long it takes to configure my Angular projects exactly how I want them. Installing and configuring things like Tailwind and ESLint should be quick and easy, but that's never the case. Enter create-angular-app.

Why?

Nobody likes switching between projects with different TypeScript compiler options, linting rules, styling frameworks and so on, but these things are important. The process for getting a project set up with them should be frictionless. I rarely deviate from my normal project configuration of ESLint, Tailwind, removing Karma & Jasmine dependencies, and adding environment files. All of these require at least one step each after using ng new.

create-angular-app solves this problem. It contains a template, where I've configured all of this for the last time. Now, when I want to create a new Angular application, I simply do

npm create @chimpbyte/angular-app@latest

and follow the simple prompts:

create-angular-app prompts

Easy!

What's included?

Out of the box, you get:

  • Tailwind CSS
  • ESLint with the rules I find most useful
  • Angular routing
  • Scss for custom styling if Tailwind doesn't cover it
  • No automatically generated test files when running ng generate
  • No Karma/Jasmine dependencies installed. If you're going to unit test your application, I'd recommend jest-preset-angular

Sounds cool, but can I tweak it how I like?

Yes, but not currently through the CLI. You can manually amend the angular.json file etc. I do plan to make certain elements optional (e.g. Tailwind) but feel free to open an issue on GitHub if you've got any suggestions.

I also plan to add more templates for other configurations I occasionally use. Again, please open an issue with any questions/suggestions.

Credits

Brandon Roberts for his create-angular-project package which I used as a starting point.


This content originally appeared on DEV Community and was authored by Josh Hills


Print Share Comment Cite Upload Translate Updates
APA

Josh Hills | Sciencx (2023-04-01T22:53:45+00:00) Create an Angular app with ESLint & Tailwind CSS in seconds. Retrieved from https://www.scien.cx/2023/04/01/create-an-angular-app-with-eslint-tailwind-css-in-seconds/

MLA
" » Create an Angular app with ESLint & Tailwind CSS in seconds." Josh Hills | Sciencx - Saturday April 1, 2023, https://www.scien.cx/2023/04/01/create-an-angular-app-with-eslint-tailwind-css-in-seconds/
HARVARD
Josh Hills | Sciencx Saturday April 1, 2023 » Create an Angular app with ESLint & Tailwind CSS in seconds., viewed ,<https://www.scien.cx/2023/04/01/create-an-angular-app-with-eslint-tailwind-css-in-seconds/>
VANCOUVER
Josh Hills | Sciencx - » Create an Angular app with ESLint & Tailwind CSS in seconds. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2023/04/01/create-an-angular-app-with-eslint-tailwind-css-in-seconds/
CHICAGO
" » Create an Angular app with ESLint & Tailwind CSS in seconds." Josh Hills | Sciencx - Accessed . https://www.scien.cx/2023/04/01/create-an-angular-app-with-eslint-tailwind-css-in-seconds/
IEEE
" » Create an Angular app with ESLint & Tailwind CSS in seconds." Josh Hills | Sciencx [Online]. Available: https://www.scien.cx/2023/04/01/create-an-angular-app-with-eslint-tailwind-css-in-seconds/. [Accessed: ]
rf:citation
» Create an Angular app with ESLint & Tailwind CSS in seconds | Josh Hills | Sciencx | https://www.scien.cx/2023/04/01/create-an-angular-app-with-eslint-tailwind-css-in-seconds/ |

Please log in to upload a file.



There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.

Related Posts