ssentials for every JavaScript project

As a developer, especially if you’re new to a team, one of the fastest ways to add value is by introducing tools that improve the day-to-day workflow. These tools help maintain code quality, ensure consistency, and streamline the development process. Here’s a list of what I consider essentials for any JavaScript project:

---

1. Make code formatting consistent

• Tool: Prettier Consistent code formatting reduces the "nitpicking" during code reviews and allows developers to focus on functionality. Prettier automatically formats your code based on defined rules.

Basic setup:

npm install --save-dev prettier

Add a .prettierrc configuration file for your rules:

{
  "semi": true,
  "singleQuote": false
}

Add a formatting script in your package.json:

"scripts": {
  "format": "prettier --write ."
}

---

2. Enforce best practices

• Tool: eslint ESLint ensures your code adheres to best practices and project-specific conventions. With plugins, you can tailor it to your framework and project requirements.

Basic setup:

npm install --save-dev eslint

Initialize ESLint:

npx eslint --init

Install framework-specific plugins (e.g., Next.js):

npm install --save-dev eslint-config-next

Create a .eslintrc file for configuration or use the wizard setup.

---

3. Quick feedback on your changes

• Tools: Husky lint-staged Run linting and tests before committing or pushing code. This ensures only high-quality code is pushed to the repository.

Setup:

Install Husky and lint-staged:

npm install --save-dev husky lint-staged

Enable Husky hooks:

npx husky install

Add pre-commit and pre-push hooks:

npx husky add .husky/pre-commit "npx lint-staged"
npx husky add .husky/pre-push "npm run build"

Configure lint-staged in package.json:

"lint-staged": {
  "*.js": ["eslint --fix", "prettier --write", "jest --findRelatedTests"]
}

---

4. Pull-request static code analysis

• Tool: SonarCloud Automates the detection of code smells, vulnerabilities, and potential bugs. Great for identifying issues early.

Setup:

Integrate SonarCloud into your CI pipeline using their documentation.

Add a sonar-project.properties file to configure the scanner.

---

5. Continuous integration (CI) pipeline

• Tools: GitHub Actions, CircleCI, etc. Automate building and testing your code on every pull request.

Setup example with GitHub Actions:

Create a .github/workflows/ci.yml file:

npm install --save-dev prettier

---

6. Continuous Deployment (CD) Pipeline

• Deploy to staging and production automatically using tools like GitHub Actions or other CI/CD services. Testing in staging ensures environment variables and integrations work before going live.

Setup example for staging and production deployments:

Add a job to your CI pipeline to deploy after tests pass:

{
  "semi": true,
  "singleQuote": false
}

---

7. End-to-End testing

• Tools: Cypress, Playwright E2E tests ensure your application works as expected in a browser.

Setup example with Cypress:

Install Cypress:

"scripts": {
  "format": "prettier --write ."
}

Add a test script in package.json:

npm install --save-dev eslint

---

8. Use TypeScript for type safety and documentation

• Tool: TypeScript TypeScript adds static typing to JavaScript, catching errors at compile time and improving code readability and maintainability.

Setup:

Install TypeScript:

npx eslint --init

Initialize a tsconfig.json file:

npm install --save-dev eslint-config-next

Update your scripts in package.json:

npm install --save-dev husky lint-staged

Refactor your .js files to .ts and start enjoying type safety!

---

Adding these tools will significantly boost your project's maintainability and help your team focus on what matters most: building great features.

The above is the detailed content of ssentials for every JavaScript project. For more information, please follow other related articles on the PHP Chinese website!