How to set up a modern JavaScript development environment

· Category: JavaScript

Short answer

A modern JavaScript environment includes npm for packages, ESLint for linting, Prettier for formatting, a bundler like Vite, and a test runner like Vitest or Jest.

Steps

  1. Initialize the project: bash npm init -y
  2. Install dev tools: bash npm install -D eslint prettier vite vitest
  3. Configure ESLint: javascript // eslint.config.js export default [{ rules: { "eqeqeq": "error" } }];
  4. Configure Prettier and add format scripts.
  5. Set up a bundler config for development and production.
  6. Add test scripts to package.json.

Tips

  • Use editor integrations to run linting and formatting on save.
  • Set up git hooks with husky to enforce quality before commits.

Common issues

  • Conflicting rules between ESLint and Prettier cause noise; use eslint-config-prettier to disable conflicting rules.
  • Mismatched Node.js versions break tooling; use engines in package.json.