Sublime支持ESLint与Stylelint联合检查_规范前端与样式代码一致性

前端开发中，在sublime text配置eslint和stylelint联合检查的步骤如下：1. 安装package control并使用其安装eslint和stylelint插件；2. 在项目根目录分别创建.eslintrc.js（或.json）和.stylelintrc文件以定义js与样式代码规则；3. 在sublime用户设置中启用eslint与stylelint，并通过syntax_map指定各文件类型对应的检查器；4. 可选配置保存时自动修复功能，分别为eslint和stylelint安装cli工具并在设置中开启save_on_autofix和auto_fix选项。

前端开发中，代码规范是团队协作的基础。不同人写的 JavaScript、CSS 或者类 CSS 语言（如 SCSS、Less）风格不一致，容易导致维护困难和 bug 频出。而 ESLint 和 Stylelint 分别作为 JS 和样式语言的检查工具，如果能在 Sublime Text 中一起使用，就能在写代码的同时完成双重校验，提前发现潜在问题。

下面讲讲如何在 Sublime 上配置 ESLint 和 Stylelint 联合检查，确保你的前端与样式代码都符合统一规范。

安装 ESLint 和 Stylelint 插件

Sublime 本身并不自带代码检查功能，需要借助插件来实现。
常用的插件管理器是 Package Control，如果你还没有安装，可以先去官网按照提示安装。

安装完 Package Control 后：

立即学习“前端免费学习笔记（深入）”；

• 打开命令面板：Ctrl + Shift + P
• 输入 Install Package Control 确保已安装
• 再次打开命令面板，输入 Install Package，搜索以下两个插件并安装：
  • ESLint
  • Stylelint

这两个插件分别负责 JavaScript 和样式文件的语法检查，安装完成后会自动生效。

配置 ESLint 和 Stylelint 的规则文件

光有插件还不够，还需要告诉它们你希望用什么规则来检查代码。

ESLint 规则配置

在项目根目录下创建 .eslintrc.js 或 .eslintrc.json 文件，内容如下是一个基础示例：

module.exports = {
  env: {
    browser: true,
    es2021: true,
  },
  extends: ['eslint:recommended'],
  parserOptions: {
    ecmaVersion: 'latest',
    sourceType: 'module',
  },
  rules: {
    indent: ['error', 2],
    'linebreak-style': ['error', 'unix'],
    quotes: ['error', 'single'],
    semi: ['error', 'never'],
  },
}

保存后，在 Sublime 中打开 JS 文件时，如果有不符合规则的地方就会标红提示。

Stylelint 规则配置

同样在项目根目录下新建 .stylelintrc 文件，例如：

{
  "extends": "stylelint-config-standard",
  "rules": {
    "indentation": 2,
    "string-quotes": "single",
    "no-empty-source": null
  }
}

这样你在写 CSS 或 SCSS 时也会被检查格式是否合规。

SEEK.ai

AI驱动的智能数据解决方案，询问您的任何数据并立即获得答案

128

查看详情

让 ESLint 和 Stylelint 在 Sublime 中同时工作

默认情况下，Sublime 可能只会启用一个 Linter。为了让两者都能运行，需要调整设置。

打开 Sublime 设置界面（Preferences > Settings），切换到“User”标签页，添加如下配置：

{
  "linters": {
    "eslint": {
      "@disable": false,
      "args": [],
      "excludes": []
    },
    "stylelint": {
      "@disable": false,
      "args": [],
      "excludes": []
    }
  },
  "syntax_map": {
    "html": "html",
    "javascript": "eslint",
    "css": "stylelint",
    "scss": "stylelint"
  }
}

这段配置启用了 ESLint 和 Stylelint，并将不同的文件类型映射给对应的检查器。比如 JS 文件走 ESLint，CSS 和 SCSS 走 Stylelint。

小技巧：保存自动修复部分错误

有些规则是可以自动修复的，比如引号、缩进等。你可以让 Sublime 在保存时自动修复这些小问题。

对 ESLint：

安装 ESLint CLI 工具（前提是 Node.js 已安装）：

npm install eslint --save-dev

然后在 Sublime 设置中添加保存时执行 ESLint 自动修复：

"save_on_autofix": true

对 Stylelint：

同样安装 Stylelint：

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

并在 Sublime 设置里开启自动修复选项：

"auto_fix": true

这样每次保存代码时，一些格式上的小问题会被自动修正，减少手动修改的工作量。

基本上就这些。只要把规则文件配好，再配合 Sublime 的插件设置，就能实现 JS 和样式代码的同步检查。虽然一开始配置有点麻烦，但一旦搭好，后续开发效率提升明显，也更容易保持代码一致性。

以上就是Sublime支持ESLint与Stylelint联合检查_规范前端与样式代码一致性的详细内容，更多请关注php中文网其它相关文章！