Ember New Plus
Setup a sweet VS Code development environment for your ember project – ludicrously fast
Overview
Setting up a new Ember project can be a daunting task, especially for those looking to optimize their development experience in Visual Studio Code. Fortunately, there's a bash script designed to streamline this process, making it effortless to create a new Ember app while ensuring that all the necessary tools are in place. This approach not only saves time but also provides a smoother setup for developers who want to jump straight into coding without worrying about configurations.
Using the provided script, developers can quickly navigate to their app directory and execute a simple command that initializes the environment without needing to clone an entire repository. Once the setup is complete, you’ll just need to install a few recommended VS Code extensions to enhance your workflow further.
Features
-
Javascript Linting and Formatting: Automatically integrates ESLint and Prettier for consistent code formatting and fixes on save, ensuring a clean and maintainable codebase.
-
CSS Linting and Formatting: Incorporates stylelint for CSS code with automatic error fixing, enhancing the quality of stylesheets.
-
Utility-First CSS Support: Integration with Tailwind and PostCSS offers suggestions for class names, allowing for efficient and organized CSS development.
-
Git Hooks with Husky: Enables the use of git hooks to enforce quality checks before commits.
-
Staged Linting: Lints JavaScript, Handlebars, and CSS files that are staged for commit, helping catch errors before they make it into the codebase.
-
Commit Message Linting: Ensures that commit messages adhere to conventional standards, promoting clarity and consistency in version control.
-
In-editor Debugging: The "Debugger for Chrome" integration allows developers to debug applications seamlessly within VS Code, enhancing the development experience.
- Ember
Ember.js is a productive, battle-tested JavaScript framework for building modern web applications. It includes everything you need to build rich UIs that work on any device.
- Tailwind
Tailwind CSS is a utility-first CSS framework that provides pre-defined classes for building responsive and customizable user interfaces.
- Eslint
ESLint is a linter for JavaScript that analyzes code to detect and report on potential problems and errors, as well as enforce consistent code style and best practices, helping developers to write cleaner, more maintainable code.
- Grunt
Grunt is a popular JavaScript task runner that automates repetitive tasks like minification, compilation, and testing, allowing developers to focus on writing code.
- Stylelint
Stylelint is a modern linter for CSS that helps you avoid errors and enforce consistent styling conventions. It provides rules for detecting errors and warnings, and can be configured to match your specific project's requirements.