Front-end-articles前端开发工具链：ESLint+Stylelint+VSCode自动格式化配置教程

【免费下载链接】Front-end-articles 分享我的编程经验和学习心得，订阅请点 watch 项目地址: https://gitcode.com/gh_mirrors/fr/Front-end-articles

在现代前端开发中，代码规范和自动格式化是提升团队协作效率的关键。本文将详细介绍如何通过ESLint、Stylelint与VSCode的配合，打造完整的前端代码质量保障体系，帮助开发者快速实现代码自动格式化，减少团队协作中的格式冲突。

为什么需要代码自动格式化？

代码格式化工具能统一团队编码风格，减少因格式问题产生的代码审查争议。通过ESLint处理JavaScript/TypeScript代码规范，Stylelint管理CSS/SCSS样式规则，配合VSCode的实时校验功能，可在编码过程中即时发现并修复问题，让开发者专注于业务逻辑而非格式细节。

环境准备与插件安装

1. 安装VSCode插件

首先需要在VSCode中安装两个核心插件：

• ESLint：用于JavaScript/TypeScript代码校验
• Stylelint：用于CSS/SCSS样式校验

安装完成后，通过File -> 首选项 -> 设置打开配置界面，搜索"eslint"并点击"在settings.json中编辑"：

2. 项目依赖安装

在项目根目录执行以下命令安装必要依赖：

# ESLint相关依赖
npm i -D eslint eslint-config-airbnb-vue3-ts

# Stylelint相关依赖
npm i -D sass stylelint stylelint-config-standard-scss stylelint-scss

ESLint配置详解

1. 创建ESLint配置文件

在项目根目录创建.eslintrc.js文件，添加以下配置：

module.exports = {
    root: true,
    env: {
        browser: true,
        node: true,
        es6: true,
        jest: true,
    },
    extends: ['eslint-config-airbnb-vue3-ts'],
    rules: {
        // 可根据项目需求自定义规则
    },
}

2. VSCode自动修复配置

在.vscode/settings.json中添加以下配置，实现保存时自动修复：

{
    "editor.codeActionsOnSave": {
        "source.fixAll": true
    },
    "eslint.validate": [
        "javascript",
        "javascriptreact",
        "typescript",
        "typescriptreact"
    ],
    "eslint.alwaysShowStatus": true
}

确保VSCode右下角状态栏显示ESLint已激活，否则检查配置是否正确。

Stylelint配置详解

1. 创建Stylelint配置文件

在项目根目录创建.stylelintrc.js文件：

module.exports = {
    extends: [
        'stylelint-config-standard-scss',
    ],
    rules: {
        indentation: 4,
        'media-feature-range-notation': null,
        'alpha-value-notation': ['number'],
        'color-function-notation': ['legacy'],
        'no-descending-specificity': null,
        'font-family-no-missing-generic-family-keyword': null,
        'selector-type-no-unknown': null,
        'at-rule-no-unknown': null,
        'no-duplicate-selectors': null,
        'no-empty-source': null,
        'selector-class-pattern': null,
        'selector-pseudo-class-no-unknown': [
            true,
            { ignorePseudoClasses: ['global', 'deep'] },
        ],
        'scss/at-rule-no-unknown': [
            true,
            {
                ignoreAtRules: ['tailwind'],
            },
        ],
    },
};

2. Stylelint VSCode配置

在.vscode/settings.json中添加Stylelint支持：

{
    "stylelint.validate": [
        "css",
        "less",
        "postcss",
        "scss",
        "sass"
    ]
}

配置验证与效果演示

完成配置后，在VSCode中打开任意Vue/JavaScript/TypeScript文件，故意写入不符合规范的代码，保存文件时会自动格式化修复：

如需调整格式化优先级，可在VSCode设置中修改Vetur插件的默认格式化器：

常见问题解决

忽略特定规则

在Vue文件的模板中忽略ESLint规则时，需使用HTML注释格式：

<!-- eslint-disable max-len -->
<div class="long-class-name-for-demonstration-purposes-only">超长类名示例</div>

命令行手动修复

在package.json中添加脚本：

"scripts": {
  "lint": "eslint . --ext .vue,.js,.jsx,.ts,.tsx --fix",
  "lint:style": "stylelint **/*.{css,scss,sass} --fix"
}

通过npm run lint和npm run lint:style命令可批量修复项目中的格式问题。

总结

通过本文介绍的ESLint+Stylelint+VSCode配置方案，开发者可以实现代码的自动格式化与规范校验，显著提升开发效率和代码质量。该配置方案兼容Vue、React等主流前端框架，可根据项目需求灵活调整规则，是现代前端工程化的必备工具链。

要获取完整配置示例，可克隆项目仓库进行参考：

git clone https://gitcode.com/gh_mirrors/fr/Front-end-articles

合理使用代码格式化工具不仅能减少团队摩擦，更能培养良好的编码习惯，为项目的长期维护奠定坚实基础。

【免费下载链接】Front-end-articles 分享我的编程经验和学习心得，订阅请点 watch 项目地址: https://gitcode.com/gh_mirrors/fr/Front-end-articles