前端开发中，在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，搜索以下两个插件并安装：ESLintStylelint
这两个插件分别负责 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 时也会被检查格式是否合规。
AIBox 一站式AI创作平台
AIBox365一站式AI创作平台，支持ChatGPT、GPT4、Claue3、Gemini、Midjourney等国内外大模型
31 查看详情
让 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联合检查_规范前端与样式代码一致性的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/227885.html
微信扫一扫 
支付宝扫一扫 
