`
huangyongxing310
  • 浏览: 495940 次
  • 性别: Icon_minigender_1
  • 来自: 广州
文章分类
社区版块
存档分类
最新评论

前端格式化工具与检测工具选择与使用

 
阅读更多
//工具安装前的准备与相关简单用到的命令
node -v
npm -v


npm init 初始化一个空项目是一个好的习惯,生成一个package.json


npm i 是 npm install 的简写,建议使用 npm i


npm i express --save/npm i express -S (安装 express,同时将 "express": "^4.14.0" 写入 dependencies )

npm i express --save-dev/npm i express -D (安装 express,同时将 "express": "^4.14.0" 写入 devDependencies )


npm start 等价于 npm run start
npm test 等价于 npm run test


NODE_ENV=test node app
通过以上命令启动程序,指定当前环境变量 NODE_ENV 的值为 test,那么在 app.js 中可通过 process.env 来获取环境变量:
console.log(process.env.NODE_ENV) //test



//前端格式化工具与检测工具选择与使用

HTML:选择htmlHint进行检测,选择prettier进行格式化
CSS:选择stylelint进行检测,stylelint-order进行CSS属性排序插件排序,选择prettier进行格式化
JS:选择ESLint进行检测,选择prettier进行格式化


想检测Html中的JavaScript,加入
npm i eslint-plugin-html -D



prettier安装使用:
https://www.cnblogs.com/guwufeiyang/p/12886333.html

工具建议全局安装
全局安装
npm install --global prettier

局部安装
npm install --save-dev --save-exact prettier

yarn add prettier --dev --exact

运行配置文件,建议使用js格式(JSON,JS,YAML)
.prettierrc.js (例子)

module.exports = {
printWidth: 120, //编辑器每行的长度,默认80;
semi: true, //是否使用分号,默认true,使用分号;
singleQuote: true, //是否使用单引号,默认为false,不适用单引号,使用双引号;
bracketSpacing: true, //对象括号中的空格,默认true;
tabWidth: 4, //制表符tab的宽度,默认值是2;
useTabs: true, //代码缩进是否用制表符tab,默认false;
TrailingCooma: 'all', //末尾逗号,none 末尾没有逗号,es5 es5有效的地方保留,all 在可能的地方都加上逗号;
jsxBracketSameLine: false, //jsx标签闭合位置 默认false,
};

更多自定义配置:https://prettier.io/docs/en/options.html?spm=a2c4e.11153940.blogcont422690.11.5d0b5721zz3ckz

执行格式化
prettier --config 配置位置 --write 需要格式化的文件
基础用法
prettier --config ./.prettierrc --write ./index.js
扩展用法(自定义文件配置以及格式化vue文件)
prettier --config ./pre.js --write ./index.vue

webstrom可以在file watcher中进行prettier的监听,做到保存时就进行格式化




htmlhint安装使用:
https://www.cnblogs.com/imwtr/p/9189414.html

npm i -g htmlhint

webstrom安装htmlhint插件;

因此插件比较特殊,在windows下,bin中请使用 node执行程序的绝对路径 全局 htmlhint的绝对路径
bin:  D:\Program Files\nodejs\node.exe C:\Users\e470\AppData\Roaming\npm\node_modules\htmlhint\bin\htmlhint
path: .htmlhintrc


.htmlhintrc(只支持JSON方式进行配置)
{
  "tagname-lowercase": true,
  "attr-lowercase": true,
  "attr-value-double-quotes": true,
  "attr-value-not-empty": false,
  "attr-no-duplication": false,
  "doctype-first": true,
  "tag-pair": true,
  "tag-self-close": true,
  "spec-char-escape": true,
  "id-unique": true,
  "src-not-empty": true,
  "title-require": true,
  "alt-require": true,
  "doctype-html5": true,
  "id-class-value": "hump",
  "style-disabled": false,
  "inline-style-disabled": false,
  "inline-script-disabled": false,
  "space-tab-mixed-disabled": "tab",
  "id-class-ad-disabled": true,
  "href-abs-or-rel": false,
  
  
}

对应说明:
标签名必须小写
属性名必须小写
属性值必须放在双引号中
属性值一定不可为空
属性值一定不可重复
Doctype必须是 HTML 文档的第一行
标签必须成对
标签必须自封闭
特殊字符必须
ID 属性必须唯一
src 属性一定不可为空
title 属性必须出现在标签中
img 标签必须包含 alt 属性
Doctype 必须是 HTML5
ID 和 Class 的命名规则必须统一
不该使用样式标签
不该使用行内样式
不该使用行内脚本
空格和制表符一定不可混合在行前
ID 和 Class 一定不可使用广告关键词
href 必须是绝对路径或者相对路径
属性值一定不可使用不安全字符
script 标签不该使用在头部
————————————————
https://blog.csdn.net/weixin_40073115/article/details/103819884

更详细说明:
https://blog.csdn.net/LuckXinXin/article/details/105421681

简单使用:
htmlhint testt/tdTest.html




stylelint安装使用:
一个强大的、现代化的 CSS 检测工具
https://www.cnblogs.com/jiaoshou/p/11284204.html
https://blog.csdn.net/maimiho/article/details/110226793

安装:
npm i stylelint stylelint-config-standard stylelint-config-prettier stylelint-order  -D

yarn add stylelint stylelint-config-standard stylelint-config-prettier stylelint-order --dev


其中,stylelint是运行工具,stylelint-config-standard是stylelint的推荐配置,
stylelint-order是CSS属性排序插件(先写定位,再写盒模型,再写内容区样式,最后写 CSS3 相关属性)。

① stylelint
② stylelint-config-standard:一些常见的css书写规范
③ stylelint-config-prettier:关闭所有不必要的或者有可能与Prettier冲突的规则
④ stylelint-order:提供给css属性排序的功能
⑤ stylelint-config-rational-order:一套常见的css书写顺序
⑥ prettier: 格式化


webstrom中配置stylelint运行环境
https://www.cnblogs.com/imwtr/p/9189414.html

stylelint --fix  用于运行stylelint-order排序
stylelint --fix testt/tdTest.html   //不能用“\”

.stylelintrc.js(配置文件)
module.exports = {
extends: [
"stylelint-config-standard",
"stylelint-config-recess-order",
"stylelint-config-prettier",
],
plugins: ["stylelint-scss", "stylelint-order"],
rules: {
"at-rule-no-unknown": [
true,
{
ignoreAtRules: [
"extend",
"at-root",
"debug",
"warn",
"error",
"if",
"else",
"for",
"each",
"while",
"mixin",
"include",
"content",
"return",
"function",
],
},
],ignoreatrulesignoreatrulesignoreatrulesignoreatrulesignoreatrulesignoreAtRules
},
};


webStrom可以在file Watcher中进行prettier的监听,做到保存时就进行格式化(感觉会要多种文件类型要监听,不太好用,还是手动触发好点)
stylelint --fix testt/tdTest.html   //不能用“\”
配置参数
D:\webTest\eslitTest\node_modules\.bin\stylelint.cmd
$/FileRelativePath$ --fix
$/FileRelativePath$


配置stylelint-order的快捷方式:
webStrom中在tool中加入这个外部工具,方便你在保存时就进行一次排序

快捷方式配置参数
D:\webTest\eslitTest\node_modules\.bin\stylelint.cmd
$FileName$ --fix
$FileDir$


webStrom中在file watcher 中加入这个外部工具,方便你在保存时就进行一次排序








ESLint安装使用:
https://www.cnblogs.com/lsgxeva/p/7994474.html

安装
npm i -g eslint babel-eslint eslint-config-alloy eslint-plugin-html

npm install eslint --save-dev


yarn add eslint babel-eslint eslint-config-alloy eslint-plugin-html --dev

eslint --init  //设置完成后我们会得到一份文件名为 .eslintrc.js 的配置文件

.eslintrc.js
module.exports = {
root: true,
parserOptions: {
parser: 'babel-eslint',
},
env: {
browser: true,
//; node: true,;
es6: true,;
jquery: true,
},
plugins: ['html'],
// extends: 'standard',
extends: ['eslint:recommended'],
rules: {
'vue/max-attributes-per-line': [
0,
{
singleline: 10,;singleline;singleline;singleline;singleline;singleline;singleline
multiline: {;;;;;;
max: 1,;;;;;;
allowFirstLine: true,
},
},
];,
'vue/singleline-html-element-content-newline': 'off';,
'vue/multiline-html-element-content-newline': 'off';,
'vue/name-property-casing': [0, 'PascalCase'];,
'vue/no-v-html': 'off';,
'accessor-pairs': 2,
'arrow-spacing': [
2,
{
before: true,
after: true,
},
],
'block-spacing': [2, 'always'],
'brace-style': [
2,
'1tbs',
{
allowsingleline: true,
},
],
camelcase: [
2,
{
properties: 'always',
},
],
'comma-dangle': [0, 'never'], //对象字面量项尾不能有逗号
'comma-spacing': [
2,
{
before: false,
after: true,
},
],
'comma-style': [2, 'last'],
'constructor-super': 2,
curly: [2, 'multi-line'],
'dot-location': [2, 'property'],
'eol-last': 2,
eqeqeq: ['error', 'always'],
'generator-star-spacing': [
2,
{
before: true,
after: true,
},
],
'handle-callback-err': [2, '^(err|error)$'],
indent: [
2,
'tab',
{
switchcase: 1,
},
],
'jsx-quotes': [2, 'prefer-single'],
'key-spacing': [
2,
{
beforecolon: false,
aftercolon: true,
},
],
'keyword-spacing': [
2,
{
before: true,
after: true,
},
],
'new-cap': [
2,
{
newiscap: true,
capisnew: false,
},
],
'new-parens': 2,
'no-array-constructor': 2,
'no-caller': 2,
'no-console': 'off',
'no-class-assign': 2,
'no-cond-assign': 2,
'no-const-assign': 2,
'no-control-regex': 0,
'no-delete-var': 2,
'no-dupe-args': 2,
'no-dupe-class-members': 2,
'no-dupe-keys': 2,
'no-duplicate-case': 2,
'no-constant-condition': 2,
'no-empty-character-class': 2,
'no-empty-pattern': 2,
'no-eval': 2,
'no-ex-assign': 2,
'no-extend-native': 2,
'no-extra-bind': 2,
'no-extra-boolean-cast': 2,
'no-extra-parens': [2, 'functions'],
'no-fallthrough': 2,
'no-floating-decimal': 2,
'no-func-assign': 2,
'no-implied-eval': 2,
'no-inner-declarations': [2, 'functions'],
'no-invalid-regexp': 2,
'no-irregular-whitespace': 2,
'no-iterator': 2,
'no-label-var': 2,
'no-labels': [
2,
{
allowloop: false,
allowswitch: false,
},
],
'no-lone-blocks': 2,
'no-mixed-spaces-and-tabs': 2,
'no-multi-spaces': 2,
'no-multi-str': 2,
'no-multiple-empty-lines': [
2,
{
max: 10,
},
],
'no-native-reassign': 2,
'no-negated-in-lhs': 2,
'no-new-object': 2,
'no-new-require': 2,
'no-new-symbol': 2,
'no-new-wrappers': 2,
'no-obj-calls': 2,
'no-octal': 2,
'no-octal-escape': 2,
'no-path-concat': 2,
'no-proto': 2,
'no-redeclare': 2,
'no-regex-spaces': 2,
'no-return-assign': [2, 'except-parens'],
'no-self-assign': 2,
'no-self-compare': 2,
'no-sequences': 2,
'no-shadow-restricted-names': 2,
'no-spaced-func': 2,
'no-sparse-arrays': 2,
'no-this-before-super': 2,
'no-throw-literal': 2,
'no-trailing-spaces': 2,
'no-undef': 0,
'no-undef-init': 2,
'no-unexpected-multiline': 2,
'no-unmodified-loop-condition': 2,
'no-unneeded-ternary': [
2,
{
defaultassignment: false,
},
],
'no-unreachable': 2,
'no-unsafe-finally': 2,
'no-unused-vars': [
1,
{
vars: 'local',
args: 'none',
},
],
'no-useless-call': 0,
'no-useless-computed-key': 2,
'no-useless-constructor': 2,
'no-useless-escape': 0,
'no-whitespace-before-property': 2,
'no-with': 2,
'one-var': [
2,
{
initialized: 'never',
},
],
'operator-linebreak': [
2,
'after',
{
overrides: {
'?': 'before',
':': 'before',
},
},
],
'padded-blocks': [2, 'never'],
quotes: [
2,
'single',
{
avoidescape: true,
allowtemplateliterals: true,
},
],
// 'quotes': [2, 'double', {
// // 'avoidEscape': true,
// // 'allowTemplateLiterals': true
// // }],
semi: [2, 'always'],
'semi-spacing': [
2,
{
before: false,
after: true,
},
],
'space-before-blocks': [2, 'always'],
'space-before-function-paren': [0, 'never'],
'space-in-parens': [2, 'never'],
'space-infix-ops': 2,
'space-unary-ops': [
2,
{
words: true,
nonwords: false,
},
],
'spaced-comment': [
0,
'always',
{
markers: ['global', 'globals', 'eslint', 'eslint-disable', '*package', '!', ','],
},
],
'template-curly-spacing': [2, 'never'],
'use-isnan': 2,
'valid-typeof': 2,
'wrap-iife': [2, 'any'],
'yield-star-spacing': [2, 'both'],
yoda: [2, 'never'],
'prefer-const': 2,
'array-bracket-spacing': [2, 'never'
},
};


eslint配置环境(上面内容分析)
"env": {
    "browser": true,
    "commonjs": true,
    "es6": true,
    "jquery"
}
env 属性来指定要启用的环境,将其设置为 true,以保证在进行代码检测时不会把这些环境预定义的全局变量识别成未定义的变量而报错:


设置语言选项
默认情况下,eslint 支持 ecmascript 5 语法,如果你想启用对 ecmascript 其它版本和 jsx 等的支持,eslint 允许你使用 parseroptions 属性进行指定想要支持的 javascript 语言选项,不过你可能需要自行安装 eslint-plugin-react 等插件。
"parserOptions": {
    "ecmaVersion": 6,
    "sourceType": "module",
    "ecmaFeatures": {
        "jsx": true
    }
}


配置规则
在上文的配置文件中, "extends": "eslint:recommended" 选项表示启用推荐规则,在推荐规则的基础上我们还可以根据需要使用 rules 新增自定义规则,每个规则的第一个值都是代表该规则检测后显示的错误级别:

"off" 或 0 - 关闭规则
"warn" 或 1 - 将规则视为一个警告
"error" 或 2 - 将规则视为一个错误


rules: {
    "规则名": [规则值, 规则配置]
}



你可以在任何文件或目录上运行eslint如下命令进行检测规则
eslint yourfile.js



想检测html中的javascript
npm i eslint-plugin-html -d


webstrom可以在file watcher中进行prettier的监听,做到保存时就进行格式化
$ProjectFileDir$\node_modules\.bin\prettier
--write $FilePathRelativeToProjectRoot$



eslint配置
module.exports = {
root: true,
parserOptions: {
parser: 'babel-eslint',
},
env: {
browser: true,
// node: true,
es6: true,
jquery: true,
},
plugins: ['html'],
// extends: 'standard',
extends: ['eslint:recommended'],
rules: {
'vue/max-attributes-per-line': [
0,
{
singleline: 10,
multiline: {
max: 1,
allowFirstLine: true,
},
},
],
'vue/singleline-html-element-content-newline': 'off',
'vue/multiline-html-element-content-newline': 'off',
'vue/name-property-casing': [0, 'PascalCase'],
'vue/no-v-html': 'off',
'accessor-pairs': 2,
'arrow-spacing': [
2,
{
before: true,
after: true,
},
],
'block-spacing': [2, 'always'],
'brace-style': [
2,
'1tbs',
{
allowSingleLine: true,
},
],
camelcase: [
2,
{
properties: 'always',
},
],
'comma-dangle': [0, 'never'], //对象字面量项尾不能有逗号
'comma-spacing': [
2,
{
before: false,
after: true,
},
],
'comma-style': [2, 'last'],
'constructor-super': 2,
curly: [2, 'multi-line'],
'dot-location': [2, 'property'],
'eol-last': 2,
eqeqeq: ['error', 'always'],
'generator-star-spacing': [
2,
{
before: true,
after: true,
},
],
'handle-callback-err': [2, '^(err|error)$'],
indent: [
2,
'tab',
{
SwitchCase: 1,
},
],
'jsx-quotes': [2, 'prefer-single'],
'key-spacing': [
2,
{
beforeColon: false,
afterColon: true,
},
],
'keyword-spacing': [
2,
{
before: true,
after: true,
},
],
'new-cap': [
2,
{
newIsCap: true,
capIsNew: false,
},
],
'new-parens': 2,
'no-array-constructor': 2,
'no-caller': 2,
'no-console': 'off',
'no-class-assign': 2,
'no-cond-assign': 2,
'no-const-assign': 2,
'no-control-regex': 0,
'no-delete-var': 2,
'no-dupe-args': 2,
'no-dupe-class-members': 2,
'no-dupe-keys': 2,
'no-duplicate-case': 2,
'no-constant-condition': 1,
'no-empty-character-class': 2,
'no-empty-pattern': 2,
'no-eval': 2,
'no-ex-assign': 2,
'no-extend-native': 2,
'no-extra-bind': 2,
'no-extra-boolean-cast': 2,
'no-extra-parens': [2, 'functions'],
'no-fallthrough': 2,
'no-floating-decimal': 2,
'no-func-assign': 2,
'no-implied-eval': 1,
'no-inner-declarations': [2, 'functions'],
'no-invalid-regexp': 2,
'no-irregular-whitespace': 2,
'no-iterator': 2,
'no-label-var': 2,
'no-labels': [
2,
{
allowLoop: false,
allowSwitch: false,
},
],
'no-lone-blocks': 2,
'no-mixed-spaces-and-tabs': 2,
'no-multi-spaces': 2,
'no-multi-str': 2,
'no-multiple-empty-lines': [
2,
{
max: 10,
},
],
'no-native-reassign': 2,
'no-negated-in-lhs': 2,
'no-new-object': 2,
'no-new-require': 2,
'no-new-symbol': 2,
'no-new-wrappers': 2,
'no-obj-calls': 2,
'no-octal': 2,
'no-octal-escape': 2,
'no-path-concat': 2,
'no-proto': 2,
'no-redeclare': 2,
'no-regex-spaces': 2,
'no-return-assign': [2, 'except-parens'],
'no-self-assign': 2,
'no-self-compare': 2,
'no-sequences': 2,
'no-shadow-restricted-names': 2,
'no-spaced-func': 2,
'no-sparse-arrays': 2,
'no-this-before-super': 2,
'no-throw-literal': 0,
'no-trailing-spaces': 2,
'no-undef': 0,
'no-undef-init': 2,
'no-unexpected-multiline': 2,
'no-unmodified-loop-condition': 2,
'no-unneeded-ternary': [
2,
{
defaultAssignment: false,
},
],
'no-unreachable': 2,
'no-unsafe-finally': 2,
'no-unused-vars': [
1,
{
vars: 'local',
args: 'none',
},
],
'no-useless-call': 0,
'no-useless-computed-key': 2,
'no-useless-constructor': 2,
'no-useless-escape': 0,
'no-whitespace-before-property': 2,
'no-with': 2,
'one-var': [
2,
{
initialized: 'never',
},
],
'operator-linebreak': [
2,
'after',
{
overrides: {
'?': 'before',
':': 'before',
},
},
],
'padded-blocks': [2, 'never'],
quotes: [
2,
'single',
{
avoidEscape: true,
allowTemplateLiterals: true,
},
],
// 'quotes': [2, 'double', {
// // 'avoidEscape': true,
// // 'allowTemplateLiterals': true
// // }],
semi: [2, 'always'],
'semi-spacing': [
2,
{
before: false,
after: true,
},
],
'space-before-blocks': [2, 'always'],
'space-before-function-paren': [0, 'never'],
'space-in-parens': [2, 'never'],
'space-infix-ops': 2,
'space-unary-ops': [
2,
{
words: true,
nonwords: false,
},
],
'spaced-comment': [
0,
'always',
{
markers: ['global', 'globals', 'eslint', 'eslint-disable', '*package', '!', ','],
},
],
'template-curly-spacing': [2, 'never'],
'use-isnan': 2,
'valid-typeof': 2,
'wrap-iife': [2, 'any'],
'yield-star-spacing': [2, 'both'],
yoda: [2, 'never'],
'prefer-const': 2,
'array-bracket-spacing': [2, 'never'],
},
};
分享到:
评论

相关推荐

    前端基于xml报文格式化工具

    "前端基于xml报文格式化工具"就是这样的一个工具,它使得前端开发者能够更方便地查看、编辑和理解XML数据。 首先,我们要理解XML报文的结构。XML文档由一系列元素构成,每个元素有开始标签(如 `<element>`)、结束...

    Json格式化工具

    在处理复杂的API响应或大型数据结构时,JSON格式化工具就显得尤为重要。 "Json格式化工具"通常指的是能够将原始、混乱的JSON数据转换为整洁、易读格式的应用程序。这里的JSONView.exe就是一个这样的工具,它允许...

    json格式化工具hijson

    在使用HiJson时,你可以输入或粘贴JSON数据,工具会自动将其格式化,包括缩进、换行等,使得数据结构清晰可见。这对于调试和理解复杂的数据结构非常有帮助。此外,如果JSON数据存在语法错误,如括号不匹配、引号遗漏...

    javascript格式化和压缩工具

    首先,JavaScript格式化工具的主要任务是将混乱无序的代码整理成易于阅读和维护的格式。当开发者从他人处获取代码或在多人协作项目中工作时,代码风格的统一显得尤为重要。一些常用的JavaScript格式化工具有Prettier...

    js代码在线压缩、格式化的工具

    一个好的代码格式化工具能够按照预设的规则,如缩进风格、行宽限制和空格使用,将混乱的代码整理得整洁有序。这样,团队成员之间共享代码时,可以更容易地理解和修改,也有助于遵循一致的编码规范。例如,ESLint配合...

    JS-HTML-Format(JS及HTML代码格式化工具集合)

    针对JS(JavaScript)和HTML(超文本标记语言)这两种广泛使用的前端开发语言,有多种代码格式化工具可以帮助开发者实现这一目标。下面将详细介绍这些工具及其特点。 1. **JS Beautify**: JS Beautify是一款开源...

    前端设计辅助工具

    Prettier负责整体格式化,ESLint则更注重代码规范和错误检测。 8. **代码加密**:在压缩包中提到的"代码加密"可能是指对前端代码进行混淆和加密,以保护知识产权,防止未经授权的复制或修改。但需要注意的是,这...

    js格式化工具jscodeImprover

    JS格式化工具的主要功能包括: 1. **代码格式化**:自动调整代码的缩进、换行和空格,使其符合特定的编码规范,如ESLint或Airbnb风格指南。这对于保持代码整洁、提高团队协作效率至关重要。 2. **代码美化**:将...

    网站前端采集工具

    8. **数据清洗与处理**:采集到的数据通常需要进一步清洗和格式化,以适应后续的分析或存储。这可能涉及到去除HTML标签、处理异常值、标准化数据格式等步骤。 9. **反反爬策略**:由于网站可能存在反爬虫机制,如...

    json格式化工具【免积分下载】

    总的来说,JSON格式化工具是开发者必备的辅助工具之一,尤其对于处理JSON数据频繁的前端和后端开发者。离线版和中文界面的特性使得这款"jsonviewer"工具更加人性化和实用,适合中国的开发者群体使用。通过这样的工具...

    JSONEditor格式化

    JSONEditor是一款强大的在线工具,专为处理JSON数据而设计,提供了直观且易于操作的界面,让用户可以方便地编辑、格式化、验证以及美化JSON数据。它不仅适合开发人员,也适用于那些需要处理JSON数据但不熟悉编程的...

    json格式校验前端插件(javascript)

    1. **JSON字符串格式化**:当接收到JSON数据时,前端开发者可以使用这个插件将原始的JSON字符串转换为易读的格式,这有助于快速理解数据结构并进行调试。格式化包括缩进、换行等,使得复杂的嵌套结构更清晰。 2. **...

    格式化及压缩js文件

    1. **Prettier**: Prettier是一款强大的代码格式化工具,它可以自动按照设定的规则对JS、HTML、CSS等文件进行格式化。通过在项目中配置`.prettierrc`或`.prettierrc.json`文件,可以自定义代码格式化规则。 2. **...

    Eclipse的HTML格式化插件 Eclipse Tidy.7z

    3. **使用**:在编辑HTML文件时,可以通过快捷键或右键菜单选择“Tidy”命令来格式化代码。也可以设置快捷键,方便快速调用。 4. **更新与维护**:随着Eclipse和HTML标准的更新,定期检查插件是否有新版本,以确保...

    优质插件 / JSONVue / 格式化 json 数据

    6. **自定义设置**:用户可以根据个人偏好调整格式化的样式,如缩进空格数、是否开启高亮等,个性化设置使得工具更加贴近每个开发者的使用习惯。 尽管 JSONVue 提供了这些优秀的功能,需要注意的是,这款插件并非...

    javascript 小型格式化工具

    掌握并使用这样的JavaScript格式化工具,不仅可以提高代码质量,还能提高开发效率,尤其在多人协作的项目中,保持代码格式的一致性至关重要。学习和理解其工作原理,甚至参与开源项目的改进,都是提升编程技能的好...

    使用prettier格式化你的JavaScript

    Prettier是一个强大的代码格式化工具,它可以帮助开发者自动格式化JavaScript(以及其他语言)代码,确保代码风格的一致性。 **Prettier的基本概念** Prettier通过消除手动格式化代码的需求,提高了开发效率。它将...

    web前端抓包工具

    在Web前端开发中,了解和使用抓包工具是至关重要的技能。这些工具允许开发者实时查看、分析和调试网络请求,从而更好地理解应用的运行机制,定位性能问题,以及确保数据安全传输。以下是对"web前端抓包工具"的详细...

    前端助手FeHelper插件

    Json页面美化(页面自动检测并格式化,强制开启) 二维码生成器(支持当前页面生成QrCode) 页面取色工具(滑动鼠标随意取色) Js正则表达式(正则测试、常用正则列表) 时间(戳)转换(Unix戳与本地时间的互转) ...

    json格式化.zip

    因此,JSON格式化工具的作用是将这种紧凑格式转换为更易读的格式,通过添加适当的缩进和换行,使数据层次清晰可见。 描述中提到“绿色免安装”,这意味着这些工具不需要进行正式的安装过程,用户可以直接下载并运行...

Global site tag (gtag.js) - Google Analytics