- 浏览: 498654 次
- 性别:
- 来自: 广州
文章分类
- 全部博客 (502)
- Java (70)
- Linux (10)
- 数据库 (38)
- 网络 (10)
- WEB (13)
- JSP (4)
- 互联网 (71)
- JavaScript (30)
- Spring MVC (19)
- HTML (13)
- CSS (3)
- AngularJS (18)
- Redis (5)
- Bootstrap CSS (1)
- ZooKeeper (4)
- kafka (6)
- 服务器缓存 (4)
- Storm (1)
- MongoDB (9)
- Spring boot (16)
- log4j (2)
- maven (3)
- nginx (5)
- Tomcat (2)
- Eclipse (4)
- Swagger (2)
- Netty (5)
- Dubbo (1)
- Docker (7)
- Hadoop (12)
- OAuth (1)
- webSocket (4)
- 服务器性能 (7)
- Session共享 (1)
- tieye修改 (1)
- 工作 (1)
- 有用的语录 (0)
- https (2)
- common (5)
- 产品开发管理 (1)
- CDN 工作原理 (1)
- APNS、GCM (1)
- 架构图 (3)
- 功能实现分析 (1)
- JMX (1)
- 服务器相关操作命令 (1)
- img02 (0)
- 服务器环境搭建 (9)
- goodMenuBook (1)
- CEInstantPot (0)
- 有用数据 (1)
- 百度地图WEB API (2)
- 正则表达式 (1)
- 样式例子 (2)
- staticRecipePressureCooker.zip (1)
- jCanvas (1)
- 网站攻击方法原理 (1)
- 架构设计 (3)
- 物联网相关 (3)
- 研发管理 (7)
- 技术需求点 (1)
- 计划 (1)
- spring cloud (11)
- 服务器开发的一些实用工具和方法 (1)
- 每天学到的技术点 (4)
- Guava (1)
- ERP 技术注意要点 (2)
- 微信小程序 (1)
- FineRepor (1)
- 收藏夹 (1)
- temp (5)
- 服务架构 (4)
- 任职资格方案 (0)
- osno_test (1)
- jquery相关 (3)
- mybatis (4)
- ueditor (1)
- VueJS (7)
- python (10)
- Spring EL (1)
- shiro (1)
- 前端开发原理与使用 (7)
- YARN (1)
- Spark (1)
- Hbase (2)
- Pig (2)
- 机器学习 (30)
- matplotlib (1)
- OpenCV (17)
- Hystrix (1)
- 公司 (1)
- miniui (4)
- 前端功能实现 (3)
- 前端插件 (1)
- 钉钉开发 (2)
- Jenkins (1)
- elasticSearch使用 (2)
- 技术规范 (4)
- 技术实现原理 (0)
最新评论
//工具安装前的准备与相关简单用到的命令
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'],
},
};
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'],
},
};
发表评论
-
定时调用函数功能实现
2021-06-11 10:26 1107<html> <head> & ... -
uniApiJs
2021-06-08 18:04 0//获取当前的地理位置、速度 function getLoca ... -
百度人脸识别
2021-05-21 16:11 366package com.gaojinsoft.htwy.y20 ... -
点击DIV触发上传文件的方法
2021-05-20 14:11 1207<div Style="float:left ... -
indexedDb TEST
2021-03-24 08:36 511<!DOCTYPE html> <html& ... -
defineProperty Array push 监听
2020-10-31 15:16 466<!DOCTYPE html> <html ... -
weuiJsLayer.js
2020-07-24 09:56 274var weuiJsAlterMap = {}; f ... -
dataViewCommonJs
2020-05-09 17:00 360// var _elementIdToDataMap={} ... -
editorconfig配置
2020-03-28 20:36 469# https://editorconfig.org root ... -
commonJs
2020-03-26 21:25 365//本包使用需要先引入jquery //获取数组中的重复元素 ... -
setFormData
2019-12-20 22:30 0function setFormData(selector,d ... -
jQuery Validate 校验
2019-09-25 21:16 334https://www.runoob.com/jquery/j ... -
高德地图获取地址
2019-09-11 14:42 510高德帐号 135704744 <!doctype ... -
附件下载和导出
2019-07-19 16:55 602//post下载导出附件 function export ... -
miniUITest
2019-07-12 15:35 352miniUITest -
from转JSON的Obj 、js空判断、 js数字判断
2019-07-04 22:54 488miniUI总界面 from转JSON的Obj js空判断 j ... -
前端实现从剪贴板中获取数据
2019-05-16 14:01 1477//绑定在了body上,也可以绑定在其他可用元素行,但是不是所 ... -
js prototype原理与使用
2018-08-14 15:59 775js prototype原理与使用 prototype 使您 ... -
JS过滤树数据
2018-07-02 16:45 1025<!DOCTYPE html> <html ... -
background-position
2017-05-15 19:30 538<html> <head> ...
相关推荐
"前端基于xml报文格式化工具"就是这样的一个工具,它使得前端开发者能够更方便地查看、编辑和理解XML数据。 首先,我们要理解XML报文的结构。XML文档由一系列元素构成,每个元素有开始标签(如 `<element>`)、结束...
在处理复杂的API响应或大型数据结构时,JSON格式化工具就显得尤为重要。 "Json格式化工具"通常指的是能够将原始、混乱的JSON数据转换为整洁、易读格式的应用程序。这里的JSONView.exe就是一个这样的工具,它允许...
在使用HiJson时,你可以输入或粘贴JSON数据,工具会自动将其格式化,包括缩进、换行等,使得数据结构清晰可见。这对于调试和理解复杂的数据结构非常有帮助。此外,如果JSON数据存在语法错误,如括号不匹配、引号遗漏...
首先,JavaScript格式化工具的主要任务是将混乱无序的代码整理成易于阅读和维护的格式。当开发者从他人处获取代码或在多人协作项目中工作时,代码风格的统一显得尤为重要。一些常用的JavaScript格式化工具有Prettier...
一个好的代码格式化工具能够按照预设的规则,如缩进风格、行宽限制和空格使用,将混乱的代码整理得整洁有序。这样,团队成员之间共享代码时,可以更容易地理解和修改,也有助于遵循一致的编码规范。例如,ESLint配合...
针对JS(JavaScript)和HTML(超文本标记语言)这两种广泛使用的前端开发语言,有多种代码格式化工具可以帮助开发者实现这一目标。下面将详细介绍这些工具及其特点。 1. **JS Beautify**: JS Beautify是一款开源...
Prettier负责整体格式化,ESLint则更注重代码规范和错误检测。 8. **代码加密**:在压缩包中提到的"代码加密"可能是指对前端代码进行混淆和加密,以保护知识产权,防止未经授权的复制或修改。但需要注意的是,这...
JS格式化工具的主要功能包括: 1. **代码格式化**:自动调整代码的缩进、换行和空格,使其符合特定的编码规范,如ESLint或Airbnb风格指南。这对于保持代码整洁、提高团队协作效率至关重要。 2. **代码美化**:将...
8. **数据清洗与处理**:采集到的数据通常需要进一步清洗和格式化,以适应后续的分析或存储。这可能涉及到去除HTML标签、处理异常值、标准化数据格式等步骤。 9. **反反爬策略**:由于网站可能存在反爬虫机制,如...
总的来说,JSON格式化工具是开发者必备的辅助工具之一,尤其对于处理JSON数据频繁的前端和后端开发者。离线版和中文界面的特性使得这款"jsonviewer"工具更加人性化和实用,适合中国的开发者群体使用。通过这样的工具...
JSONEditor是一款强大的在线工具,专为处理JSON数据而设计,提供了直观且易于操作的界面,让用户可以方便地编辑、格式化、验证以及美化JSON数据。它不仅适合开发人员,也适用于那些需要处理JSON数据但不熟悉编程的...
1. **JSON字符串格式化**:当接收到JSON数据时,前端开发者可以使用这个插件将原始的JSON字符串转换为易读的格式,这有助于快速理解数据结构并进行调试。格式化包括缩进、换行等,使得复杂的嵌套结构更清晰。 2. **...
1. **Prettier**: Prettier是一款强大的代码格式化工具,它可以自动按照设定的规则对JS、HTML、CSS等文件进行格式化。通过在项目中配置`.prettierrc`或`.prettierrc.json`文件,可以自定义代码格式化规则。 2. **...
jsonView格式化工具不仅对前端开发者有帮助,后端工程师、数据分析师,以及任何需要处理JSON数据的人员都可以从这个工具中获益。尤其在调试和分析API接口返回的数据时,jsonView能够极大地提升工作效率。开发者不再...
3. **使用**:在编辑HTML文件时,可以通过快捷键或右键菜单选择“Tidy”命令来格式化代码。也可以设置快捷键,方便快速调用。 4. **更新与维护**:随着Eclipse和HTML标准的更新,定期检查插件是否有新版本,以确保...
6. **自定义设置**:用户可以根据个人偏好调整格式化的样式,如缩进空格数、是否开启高亮等,个性化设置使得工具更加贴近每个开发者的使用习惯。 尽管 JSONVue 提供了这些优秀的功能,需要注意的是,这款插件并非...
掌握并使用这样的JavaScript格式化工具,不仅可以提高代码质量,还能提高开发效率,尤其在多人协作的项目中,保持代码格式的一致性至关重要。学习和理解其工作原理,甚至参与开源项目的改进,都是提升编程技能的好...
Prettier是一个强大的代码格式化工具,它可以帮助开发者自动格式化JavaScript(以及其他语言)代码,确保代码风格的一致性。 **Prettier的基本概念** Prettier通过消除手动格式化代码的需求,提高了开发效率。它将...
在Web前端开发中,了解和使用抓包工具是至关重要的技能。这些工具允许开发者实时查看、分析和调试网络请求,从而更好地理解应用的运行机制,定位性能问题,以及确保数据安全传输。以下是对"web前端抓包工具"的详细...
Json页面美化(页面自动检测并格式化,强制开启) 二维码生成器(支持当前页面生成QrCode) 页面取色工具(滑动鼠标随意取色) Js正则表达式(正则测试、常用正则列表) 时间(戳)转换(Unix戳与本地时间的互转) ...