WebStorm配置JSON文件校验与自动格式化步骤

秋磊小哥_4845

秋磊小哥_4845

2026-09-17

516人浏览

原创

WebStorm JSON校验需手动启用Schema:勾选JSON schema validation;vue.config.js非JSON不适用;jsconfig.json需手动填Schema URL;tsconfig.json仅校验compilerOptions字段;格式化中文转义需关闭Escape non-ASCII;Prettier格式化JSON需同时满足启用、安装包、配置parser三条件。

webstorm配置json文件校验与自动格式化步骤

JSON文件不报错?先确认是否启用Schema校验

WebStorm默认只做基础语法检查(比如括号配对、引号闭合),tsconfig.json里写错"jsx"为"jxs",或"moduleResolution": "nod"这种拼写错误,根本不会标红——因为没绑定官方 Schema。

必须手动开启校验开关:Settings > Editor > Inspections > JSON > JSON schema validation → 勾选。否则所有字段级校验都失效。

  • Vue 项目中的 vue.config.js 不是 JSON 文件,它是 JS 模块,WebStorm 不走 JSON Schema 校验;想获得类型提示,得靠 @vue/cli-service 的类型定义,不是靠 JSON 配置
  • jsconfig.json WebStorm 不自带 Schema,需手动填 URL:https://json.schemastore.org/jsconfig.json
  • tsconfig.json 只要项目装了 typescript 包,WebStorm 就能自动匹配官方 Schema,但仅校验 compilerOptions 下的字段;像 "types": ["vue"] 这类扩展字段不会报错,属于合法行为

格式化 JSON 时中文变 \uXXXX?关掉这个选项

按 Ctrl+Alt+L(Windows/Linux)或 Cmd+Option+L(macOS)后中文键名/字符串被转义成 Unicode,不是 Prettier 或编码问题,而是 WebStorm 内置 JSON formatter 的默认策略。

解决方法很简单:Settings > Editor > Code Style > JSON → 取消勾选 Escape non-ASCII characters。

  • 这个设置只影响 IDE 内的格式化行为,不影响运行时 JSON.stringify() 输出
  • 如果用了 Prettier,该选项无效——Prettier 自己控制是否转义,但前提是它真正在处理 JSON 文件(见下一条)
  • 状态栏显示类型不是 JSON(比如是 Plain Text),右键文件 → Override File Type → 选 JSON

Prettier 格式化 JSON 失效?检查三个硬性条件

Prettier 对 JSON 的支持不是“装了就生效”,2024.3 之前版本甚至会静默跳过,必须同时满足:

arcgis-js
arcgis-js

提供 ArcGIS Maps SDK for JavaScript 开发辅助,涵盖 2D/3D 地图视图、图层管理、数据可视化、空间分析等功能模块的参考和示例指导。

下载
  • Settings > Languages & Frameworks > JavaScript > Prettier 中勾选 Enable Prettier for JSON files
  • 项目中有 prettier 包:npm install --save-dev prettier(推荐本地安装)
  • .prettierrc.json 或 prettier.config.js 显式声明解析器:
    – 若用 JSON 配置:{"parser": "json"}
    – 若用 JS 配置:{"overrides": [{"files":"*.json","options":{"parser":"json"}}]}

低版本 WebStorm(如 2023.x)即使配了也可能 fallback 到内置 formatter,升级到 2024.3+ 更稳妥。

批量格式化 JSON 文件?别只右键文件夹

右键文件夹 → Reformat Code 看似直接,但实际受两个硬限制:

  • 只对标记为 Sources Root 的目录生效(右键目录 → Mark Directory as > Sources Root)
  • 若文件扩展名非常规(如 .config.json、.schema.json),需先到 Settings > Editor > File Types > JSON 的 Registered Patterns 里添加对应 pattern
  • 快捷键 Ctrl+Alt+L 默认只作用于当前打开文件;想批量处理,先用 Ctrl+Shift+R 打开“Replace in Path”,或终端执行 npx prettier --write "**/*.json"

真正稳定可控的方式,还是靠脚本:"format:json": "prettier --write \"**/*.json\"" 放进 package.json,新人拉完代码直接 npm run format:json。

相关文章

PHP速学视频免费教程(入门到精通)
PHP速学视频免费教程(入门到精通)

PHP怎么学习?PHP怎么入门?PHP在哪学?PHP怎么学才快?不用担心,这里为大家提供了PHP速学教程(入门到精通),有需要的小伙伴保存下载就能学习啦!

下载

本站声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

相关专题

更多
js正则表达式
js正则表达式

php中文网为大家提供各种js正则表达式语法大全以及各种js正则表达式使用的方法,还有更多js正则表达式的相关文章、相关下载、相关课程,供大家免费下载体验。

2023.06.20

4596

8

js获取当前时间
js获取当前时间

JS全称JavaScript,是一种具有函数优先的轻量级,解释型或即时编译型的编程语言;它是一种属于网络的高级脚本语言,主要用于Web,常用来为网页添加各式各样的动态功能。js怎么获取当前时间呢?php中文网给大家带来了相关的教程以及文章,欢迎大家前来学习阅读。

2023.07.28

1395

5

js 字符串转数组
js 字符串转数组

js字符串转数组的方法:1、使用“split()”方法;2、使用“Array.from()”方法;3、使用for循环遍历;4、使用“Array.split()”方法。本专题为大家提供js字符串转数组的相关的文章、下载、课程内容,供大家免费下载体验。

2023.08.03

1818

5

js是什么意思
js是什么意思

JS是JavaScript的缩写,它是一种广泛应用于网页开发的脚本语言。JavaScript是一种解释性的、基于对象和事件驱动的编程语言,通常用于为网页增加交互性和动态性。它可以在网页上实现复杂的功能和效果,如表单验证、页面元素操作、动画效果、数据交互等。

2023.08.17

10143

11

js删除节点的方法
js删除节点的方法

js删除节点的方法有:1、removeChild()方法,用于从父节点中移除指定的子节点,它需要两个参数,第一个参数是要删除的子节点,第二个参数是父节点;2、parentNode.removeChild()方法,可以直接通过父节点调用来删除子节点;3、remove()方法,可以直接删除节点,而无需指定父节点;4、innerHTML属性,用于删除节点的内容。

2023.09.01

1000

4

js截取字符串的方法
js截取字符串的方法

js截取字符串的方法有substring()方法、substr()方法、slice()方法、split()方法和slice()方法。本专题为大家提供字符串相关的文章、下载、课程内容,供大家免费下载体验。

2023.09.04

2884

5

Js中concat和push的区别
Js中concat和push的区别

Js中concat和push的区别:1、concat用于将两个或多个数组合并成一个新数组,并返回这个新数组,而push用于向数组的末尾添加一个或多个元素,并返回修改后的数组的新长度;2、concat不会修改原始数组,是创建新的数组,而push会修改原数组,将新元素添加到原数组的末尾等等。本专题为大家提供concat和push相关的文章、下载、课程内容,供大家免费下载体验。

2023.09.14

1609

5

js截取字符串的方法介绍
js截取字符串的方法介绍

JavaScript字符串截取方法,包括substring、slice、substr、charAt和split方法。这些方法可以根据具体需求,灵活地截取字符串的不同部分。在实际开发中,根据具体情况选择合适的方法进行字符串截取,能够提高代码的效率和可读性 。

2023.09.21

4929

3

js生成随机数方法
js生成随机数方法

JavaScript生成随机数的方法,包括使用Math.random()方法生成指定范围内的随机整数、生成随机字符串和生成随机颜色。根据具体需求,可以选择适合的方法来生成随机数,以实现各种功能 。

2023.09.25

2855

5

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程