DEV Community

Cover image for No More Messy Code: How to Master HTML, CSS, and JS Linting in VS Code Like a Pro
gerry leo nugroho
gerry leo nugroho

Posted on

No More Messy Code: How to Master HTML, CSS, and JS Linting in VS Code Like a Pro

#webdev #programming #vscode #cleancode

1. Let’s face it: bugs aren’t always born from bad logic.

Happy New Year, code-buddy, marketer, or anyone in between, and welcome to the year of 2026! A new year, a clean slate, and why not a chance to write cleaner code? If you’re like me, you’ve probably kicked off the year with big dreams and an ever-growing to-do list. But let’s take a moment to talk about something that might not be on your vision board but definitely deserves some love: Sometimes it’s the tiniest things, a missing closing tag, a sneaky typo in a class name, or wonky indentation, that bring your UI crashing down. In today’s world of fast-growing front-end ecosystems, where teams, tools, and frameworks collide, it’s all too easy for these little gremlins to slip through unnoticed. Enter linting: your new (or renewed?) best friend!

1.1 What is Linting?

Linting is the process of running a program that analyzes your code for potential errors, bad practices, or deviations from coding standards. Think of it as a spellchecker, but for code. It doesn't just look for typos; it enforces structure, style, and semantics.

The term “lint” originated from a Unix utility written in 1978 to flag suspicious C code. Today, it’s evolved into a vital part of modern development, helping developers write clean, readable, and consistent code across languages like HTML, CSS, and JavaScript.

Reference: Wikipedia - Lint (software)

1.2 Why It Matters in Front-End Development

Unlike compiled languages, HTML, CSS, and JavaScript don’t always scream at you when something goes wrong. Browsers tend to silently ignore mistakes or fallback to default behavior. That might seem forgiving,until you spend hours hunting down why your layout broke or why your JavaScript silently fails on mobile.

Linting helps catch these issues early, ideally right in your code editor before the file is even saved.

Some real benefits of linting:

  • Cleaner Code: Catch unclosed tags, unused variables, and bad syntax as you type.
  • Team Consistency: Enforce a shared style guide automatically,no more nitpicking in code reviews.
  • Faster Debugging: Errors become visible before they reach the browser.
  • Fewer Production Bugs: Lint rules reduce chances of semantic and runtime issues going unnoticed.

1.3 How Linting Works in VS Code

Modern editors like Visual Studio Code integrate beautifully with linting tools through extensions and configuration files. As you write code, the editor will underline potential issues in real time,offering suggestions, auto-fixes, and sometimes even refactoring help.

Examples:

  • In HTML, linters like HTMLHint will warn you if an image lacks an alt attribute.
  • For CSS, Stylelint can catch duplicate properties, invalid values, or even vendor prefix issues.
  • In JavaScript, ESLint highlights everything from unused variables to deprecated syntax,and integrates seamlessly with modern tooling like Prettier.

1.4 A Quick Real-Life Example

Imagine you're building a product landing page. Your teammate uses 2-space indentation in HTML, while you prefer tabs. One developer forgets to add alt tags to images, another uses a var instead of const in JavaScript. By the time you merge your branches, the code works,but it’s a readability and maintainability nightmare.

Now imagine this instead:

Linting runs the moment you hit save. Errors and warnings appear inline. Code formatting aligns instantly. No more subjective code review debates,your team agrees on code style through config, not discussion.

“An ounce of prevention is worth a pound of cure.”

– Ben Franklin (and probably every senior dev ever)

2. Real Scenario: A Team Working on a Marketing Landing Page

gemika haziq nugroho - 2. Real Scenario: A Team Working on a Marketing Landing Page

2.1 The Challenge: A Disjointed Development Effort

Imagine a scenario where a marketing team is preparing for a significant product launch. Three developers are tasked with creating a responsive landing page using HTML, CSS, and JavaScript. Each developer brings their unique coding style and preferences:

  • Developer A prefers using tabs for indentation and is meticulous about semantic HTML but occasionally overlooks alt attributes for images.
  • Developer B uses spaces for indentation and focuses on rapid development, sometimes at the expense of code clarity.
  • Developer C is adept at JavaScript but tends to use outdated syntax and lacks consistency in code formatting.

As the project progresses, the team encounters several issues:

  • Inconsistent Code Formatting: The mix of tabs and spaces leads to misaligned code, making it difficult to read and maintain.
  • Accessibility Oversights: Missing alt attributes on images compromise the page's accessibility, affecting users relying on screen readers.
  • Outdated JavaScript Syntax: The use of deprecated JavaScript features results in compatibility issues across different browsers.

These inconsistencies culminate in:

  • Merge Conflicts: Differing code styles cause frequent conflicts during version control merges, slowing down development.
  • Quality Assurance Delays: QA testers spend additional time identifying and reporting issues that could have been prevented.
  • Visual Bugs: Inconsistent styling leads to layout issues, affecting the user experience.

2.2 The Solution: Implementing Linting Tools in VS Code

To address these challenges, the team decides to integrate linting tools into their development workflow using Visual Studio Code (VS Code). Here's how they proceed:

  1. Setting Up Linting Extensions:
    • HTMLHint: Helps identify issues in HTML code, such as missing alt attributes and improper tag usage.
    • Stylelint: Enforces consistent CSS styling, catching errors like duplicate properties or invalid values.
    • ESLint: Analyzes JavaScript code to detect outdated syntax and potential errors.
    • Prettier: Automatically formats code according to predefined style rules, ensuring consistency across the codebase.
  2. Configuring Linting Rules:
    • The team establishes a shared configuration for each linter, aligning on coding standards and best practices.
    • They incorporate these configurations into the project's version control system, ensuring all team members adhere to the same rules.
  3. Integrating with Version Control:
    • By incorporating linting checks into the version control workflow, the team ensures that code is validated before merges, reducing conflicts and maintaining code quality.
  4. Continuous Feedback:
    • With linting tools integrated into VS Code, developers receive immediate feedback on code issues, allowing for prompt corrections and fostering a culture of clean coding.

2.3 The Outcome: A Cohesive and Efficient Development Process

The implementation of linting tools yields significant benefits:

  • Enhanced Code Consistency: Uniform formatting and coding standards improve code readability and maintainability.
  • Reduced Merge Conflicts: Standardized code minimizes discrepancies, leading to smoother merges.
  • Improved Accessibility and Compatibility: Early detection of issues ensures the landing page is accessible and functions correctly across browsers.
  • Accelerated Development: Immediate feedback and automated formatting streamline the development process, allowing the team to meet tight deadlines.

By adopting linting tools in VS Code, the team transforms their development workflow, producing a high-quality, accessible, and consistent landing page ready for the product launch.

3. Setting Up Your Environment

gemika-haziq-nugroho-setting-up-environment.png

In the previous section, we explored the challenges of inconsistent code formatting and how it can hinder collaboration and code quality. Now, let's take actionable steps to set up your VS Code environment with the necessary tools to enforce consistency and catch errors early.

3.1 Essential VS Code Extensions

To enhance your development workflow, consider installing the following extensions:

  1. HTMLHint: Analyzes HTML files for potential issues and enforces best practices.
  2. Stylelint: Lints CSS and SCSS files, ensuring adherence to defined style rules.
  3. ESLint: Identifies and fixes problems in JavaScript code, promoting code quality.
  4. Prettier: Automatically formats code to maintain a consistent style across your project.
  5. EditorConfig for VS Code: Maintains consistent coding styles between different editors and IDEs. (Visual Studio Marketplace, Microsoft Learn)

3.2 Installation Steps

  1. Open VS Code.
  2. Navigate to the Extensions view by clicking on the Extensions icon in the Activity Bar on the side of the window.
  3. Search for each extension by name and click Install. (DEV Community, Visual Studio Marketplace)

3.3 Configuring Each Tool

3.3.1 HTMLHint

  • Installation: Install the HTMLHint extension from the VS Code Marketplace.

  • Configuration:

    • Create a .htmlhintrc file in your project's root directory.

    • Define your preferred rules. For example:

      {
  "tagname-lowercase": true,
  "attr-lowercase": true,
  "attr-value-double-quotes": true,
  "doctype-first": true,
  "tag-pair": true,
  "spec-char-escape": true,
  "id-unique": true,
  "src-not-empty": true,
  "attr-no-duplication": true
}

    • This configuration enforces lowercase tags and attributes, requires double quotes for attribute values, and ensures that each ID is unique.

3.3.2 Stylelint

  • Installation:

    • Install Stylelint as a development dependency:(Visual Studio Marketplace)

      npm install --save-dev stylelint stylelint-config-standard

    • Install the Stylelint extension in VS Code.

  • Configuration:

    • Create a .stylelintrc.json file in your project's root directory with the following content (DEV Community).

      {
  "extends": "stylelint-config-standard"
}

    • This setup extends the standard configuration, providing a solid foundation for CSS linting.

3.3.3 ESLint

  • Installation:

    • Install ESLint as a development dependency (Reddit).

      npm install --save-dev eslint

    • Install the ESLint extension in VS Code.

  • Configuration:

    • Initialize ESLint in your project:(Visual Studio Marketplace)

      npx eslint --init

    • Follow the prompts to configure ESLint according to your project's needs.

3.3.4 Prettier

  • Installation:

    • Install Prettier as a development dependency:

      npm install --save-dev --save-exact prettier

    • Install the Prettier extension in VS Code.

  • Configuration:

    • Create a .prettierrc file in your project's root directory to define formatting rules. For example:

      {
  "semi": true,
  "singleQuote": true,
  "printWidth": 80,
  "tabWidth": 2
}

    • This configuration enforces the use of semicolons, single quotes, a maximum line width of 80 characters, and a tab width of 2 spaces.

3.3.5 EditorConfig

  • Installation: Install the EditorConfig for VS Code extension.

  • Configuration:

    • Create a .editorconfig file in your project's root directory with the following content (Stack Overflow).

      root = true

[*]
indent_style = space
indent_size = 2
end_of_line = lf
charset = utf-8
trim_trailing_whitespace = true
insert_final_newline = true

    • This configuration ensures consistent indentation, line endings, character encoding, and whitespace handling across different editors.

3.4 Enabling Format on Save

To automatically format your code upon saving:

  1. Open VS Code settings (Ctrl + , or Cmd + , on macOS).
  2. Search for "Format On Save" and enable the checkbox.

Alternatively, add the following to your settings.json:

{
  "editor.formatOnSave": true
}
Enter fullscreen mode Exit fullscreen mode

3.5 Integrating Linting with Version Control

To enforce linting rules before code is committed, consider using tools like husky and lint-staged:

  1. Install the dependencies:(Stack Overflow)

    npm install --save-dev husky lint-staged

  2. Configure husky to run linting scripts during the pre-commit hook.

This setup ensures that only code adhering to your defined standards is committed to the repository. And by following these steps, you establish a robust development environment that promotes code consistency, reduces errors, and enhances collaboration. In the next section, we'll explore how to configure each linter from scratch, tailoring them to your project's specific needs.

4. Configuring Each Linter from Scratch

gemika-haziq-nugroho-setting-up-linter.png

4.1 HTMLHint – Enforcing HTML Best Practices

  1. Installation:

Install HTMLHint as a development dependency:(htmlhint.com)

npm install --save-dev htmlhint
Enter fullscreen mode Exit fullscreen mode
  1. Configuration:

Create a .htmlhintrc file in your project's root directory to define your HTML linting rules. Here's an example configuration:

{
  "tagname-lowercase": true,
  "attr-lowercase": true,
  "attr-value-double-quotes": true,
  "doctype-first": true,
  "tag-pair": true,
  "spec-char-escape": true,
  "id-unique": true,
  "src-not-empty": true,
  "attr-no-duplication": true
}
Enter fullscreen mode Exit fullscreen mode

This setup ensures that your HTML code adheres to best practices, such as using lowercase tags and attributes, double quotes for attribute values, and unique IDs.

  1. Usage:

To lint your HTML files, run:

npx htmlhint "**/*.html"
Enter fullscreen mode Exit fullscreen mode

But as in my case, since I’d be doing a lot of Vue.js based project, it should have been modified to the following command line instructions :

npx htmlhint "dist/**/*.html" --config .htmlhintrc
Enter fullscreen mode Exit fullscreen mode

For more details, refer to the HTMLHint Getting Started Guide.

4.2 Stylelint – Maintaining Consistent CSS

  1. Installation:

Install Stylelint along with the standard configuration:(stylelint.io)

npm install --save-dev stylelint stylelint-config-standard
Enter fullscreen mode Exit fullscreen mode
  1. Configuration:

Create a .stylelintrc.json file in your project's root directory with the following content:

{
  "extends": "stylelint-config-standard"
}
Enter fullscreen mode Exit fullscreen mode

This configuration extends the standard Stylelint rules, promoting consistent and error-free CSS code.

  1. Usage:

To lint your CSS files, run: (stylelint.io)

npx stylelint "**/*.css"
Enter fullscreen mode Exit fullscreen mode

This would depend on your current setup, either you're using a framework or plain vanilla CSS, so your milage may vary, but here’s how I go about to apply according to my Vite.js’ needs.

npx stylelint "dist/**/*.css" --config .stylelintrc.json --formatter verbose --color
Enter fullscreen mode Exit fullscreen mode

For more information, visit the Stylelint Configuration Guide.

4.3 ESLint – Ensuring JavaScript Code Quality

  1. Installation:

Install ESLint as a development dependency:

npm install --save-dev eslint
Enter fullscreen mode Exit fullscreen mode
  1. Configuration:

Initialize ESLint in your project:

npx eslint --init
# You can also run this command directly using 
npm init @eslint/config@latest
Enter fullscreen mode Exit fullscreen mode

Follow the prompts to configure ESLint according to your project's needs.

Alternatively, you can create a .eslintrc.json file with a basic configuration:

{
  "env": {
    "browser": true,
    "es2021": true
  },
  "extends": "eslint:recommended",
  "parserOptions": {
    "ecmaVersion": 12,
    "sourceType": "module"
  },
  "rules": {
    "semi": ["error", "always"],
    "quotes": ["error", "single"]
  }
}
Enter fullscreen mode Exit fullscreen mode

This setup enforces the use of semicolons and single quotes, among other best practices.

  1. Usage:

To lint your JavaScript files, run:

npx eslint "**/*.js"
Enter fullscreen mode Exit fullscreen mode

For comprehensive guidance, refer to the ESLint Configuration Documentation.

4.4 Prettier – Automated Code Formatting

  1. Installation:

Install Prettier as a development dependency:

npm install --save-dev --save-exact prettier
Enter fullscreen mode Exit fullscreen mode
  1. Configuration:

Create a .prettierrc file in your project's root directory to define your formatting preferences:

{
  "semi": true,
  "singleQuote": true,
  "printWidth": 80,
  "tabWidth": 2
}
Enter fullscreen mode Exit fullscreen mode

This configuration enforces the use of semicolons, single quotes, a maximum line width of 80 characters, and a tab width of 2 spaces.

  1. Usage:

To format your code, run:

npx prettier --write .
Enter fullscreen mode Exit fullscreen mode

For more details, visit the Prettier Configuration Guide. (Prettier)

4.5 Integrating with VS Code:

To enhance your development experience, install the corresponding VS Code extensions for each tool:

Ensure that your VS Code settings enable these tools to run automatically on file save for a seamless development workflow. By meticulously configuring each linter, you establish a robust foundation for maintaining code quality and consistency across your projects. Further more we'll explore how to integrate these tools seamlessly into your development workflow, ensuring that code quality checks are an integral part of your coding process.

5. Integrating Linting into Your Workflow

gemika-haziq-nugroho-integrating-lint-into-your-workflow.png

5.1 Automate Linting with npm Scripts

Incorporate linting commands into your package.json to standardize code checks:

{
  "scripts": {
    "lint:js": "eslint .",
    "lint:css": "stylelint '**/*.css'",
    "format": "prettier --write ."
  }
}
Enter fullscreen mode Exit fullscreen mode

This setup allows your team to execute npm run lint:js, npm run lint:css, or npm run format to enforce code standards consistently.

5.2 Enable Format on Save in VS Code

Configure VS Code to automatically format code upon saving:

  1. Open Settings (Ctrl + , or Cmd + , on macOS).
  2. Search for Format On Save and enable it.

Alternatively, add the following to your settings.json:

{
  "editor.formatOnSave": true
}
Enter fullscreen mode Exit fullscreen mode

This ensures that Prettier formats your code each time you save, maintaining consistency effortlessly.

5.3 Implement Pre-Commit Hooks with Husky and lint-staged

Prevent inconsistent code from entering your repository by setting up pre-commit hooks:

  1. Install dependencies:

    npm install --save-dev husky lint-staged

  2. Initialize Husky:

    npx husky install

  3. Add a pre-commit hook:

    npx husky add .husky/pre-commit "npx lint-staged"

  4. Define lint-staged tasks in your package.json (Stack Overflow)

    {
  "lint-staged": {
    "*.{js,jsx}": ["eslint --fix", "prettier --write"],
    "*.css": ["stylelint --fix", "prettier --write"]
  }
}

This configuration ensures that only code adhering to your linting rules is committed, enhancing code quality across the team.

4. Integrate Linting into Continuous Integration (CI) Pipelines

Automate linting checks in your CI workflows to catch issues early:

  • GitHub Actions:

    name: Lint Code Base

on: [push, pull_request]

jobs:
  lint:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      - name: Install Dependencies
        run: npm install
      - name: Run ESLint
        run: npm run lint:js
      - name: Run Stylelint
        run: npm run lint:css

This setup ensures that every push or pull request triggers linting checks, maintaining code integrity throughout the development cycle.

5. Customize VS Code Settings for Enhanced Linting

Tailor your VS Code environment to align with your linting tools:

  • Enable ESLint and Stylelint:

    {
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true,
    "source.fixAll.stylelint": true
  },
  "eslint.validate": ["javascript", "javascriptreact"],
  "stylelint.validate": ["css", "scss"]
}

These settings ensure real-time feedback and automatic fixes, fostering a smoother development experience. By integrating linting tools into your workflow, you establish a robust framework that promotes code consistency, reduces errors, and enhances team collaboration.

Top comments (0)