前端工作中提高效率的小技巧

站长

2022年12月25日 17:12 · 阅读数 46

一、vs code 插件

Bracket Pair Colorizer

Bracket Pair Colorizer一个可定制的扩展，用于为匹配的括号着色。前端工作中提高效率的小技巧效果图：

Guides

Guides缩进线，（类似于Bracket Pair Colorizer是颜色区分括号）Guides是颜色区分缩进线

前端工作中提高效率的小技巧

效果图：前端工作中提高效率的小技巧

indent-rainbow

indent-rainbow缩进线的格子底色，（类似于Bracket Pair Colorizer是颜色区分括号）Guides是颜色区分缩进线

前端工作中提高效率的小技巧

GitLens — Git supercharged

GitLens — Git supercharged可查看项目提交记录、文件修改记录等等。打开某一个文件，点击任意一行代码，代码会有个小尾巴，显示本行代码的提交记录.

前端工作中提高效率的小技巧

效果图：前端工作中提高效率的小技巧

koroFileHeader

koroFileHeader

自动生成文件头部注释，自动更新最后编辑人、最后编辑时间等。
一键生成函数注释，支持函数参数自动提取并列到注释中。
支持添加佛祖保佑永无bug、神兽护体、甩葱少女等好玩有趣的图像注释
配置非常灵活方便，各种细节都能配置，可以量身打造适合你的注释。
支持所有主流语言, 配置文档非常详细，齐全。

前端工作中提高效率的小技巧

效果图: 前端工作中提高效率的小技巧

Auto Rename Tag

Auto Rename Tag自动重命名成对的 HTML/XML 标记

前端工作中提高效率的小技巧

Github Copilot

Github CopilotGitHub Copilot是一个AI对程序员，它在您键入时建议行完成和整个函数体。GitHub副驾驶由OpenAI Codex AI系统提供动力，该系统基于公共互联网文本和数十亿行代码进行训练。

copilot.github.com/ 注册申请后去vs code安装插件（使用的越久，ai越符合你的编码风格）前端工作中提高效率的小技巧

二、ES6

解构

1 利用解构实现默认值和快速赋值/传值 2 快速提取对象/数组中的一些属性减少代码量

//解构写法就可以直接拿到content，meta 了

let { content , meta } = {
  content:{
    device:{
      name:'1',
      switch_on:'on'
    },
    sites:[
      {name:'设备1',switch_on:'on'},
      {name:'设备2',switch_on:'off'},
      {name:'设备3',switch_on:'on'},
      {name:'设备4',switch_on:'on'},
    ]
  },
  meta:{
    name:'设备列表'
  }
}
console.log(content,meta)

...

rest 参数（形式为...变量名）用于获取函数的多余参数，这样就不需要使用 arguments 对象了。 rest 参数搭配的变量是一个数组，该变量将多余的参数放入其中。

function sortNumbers() { return Array.prototype.slice.call(arguments).sort() } 
// 使用 rest const sortNumbers = (...numbers) => numbers.sort()

扩展运算符（ spread ）是三个点（...）如同 rest 参数的逆运算将一个数组转为用逗号分隔的参数序列

console.log(...[1, 2, 3]) // 1 2 3 
console.log(1, ...[2, 3, 4], 5) // 1 2 3 4 5

特别注意： ...扩展对象，只能做到当对象属性是 基本数据类型 才是 深拷贝，如果是 引用数据类型，那就是浅拷贝。

可选链“?.“以及逻辑空分配（双问号）“??“

可选链的语法允许开发者访问嵌套得更深的对象属性，而不用担心属性是否真的存在。也就是说，如果可选链在挖掘过程遇到了null或undefined的值，就会通过短路（short-circuit）计算，返回undefined，而不会报错。

逻辑空分配运算符仅在空值或未定义（null or undefined）时才将值分配给a

判断某个值是否存在进而去做其他事情

  //场景1
  let title = data?.children?.[0]?.title

判断某个值是否有效进而去做其他事情

  //场景2
  let {hasCount} = person;
  text = hasCount ?? '暂无数据'

首先，安装依赖：

npm install --save-dev @babel/plugin-proposal-optional-chaining
npm install --save-dev @babel/plugin-proposal-nullish-coalescing-operator

其次，在项目的babel.config.js文件中添加配置如下

module.exports = {
  presets: ['@vue/app'],
  plugins: ["@babel/plugin-proposal-optional-chaining",
  '@babel/plugin-proposal-nullish-coalescing-operator']
}

includes 和 indexOf

一段字符串中是否包含某项字符的需求 indexOf()返回的是包含字符串的位置，如果 == -1的话，那也就是不包含这个字符串了 includes()方法返回的是布尔值，也就是true和false

// js 
if (value === 1 || value === 'one' || value === 2 || value === 'two') { 
    // Execute some code 
}
// indexOf 
if ([1, 'one', 2, 'two'].indexOf(value) >= 0) 
{ 
    // Execute some code 
} 
// includes
if ([1, 'one', 2, 'two'].includes(value)) 
{ 
    // Execute some code 
}

&& 和 ||

&&某个函数在某个条件为真时才调用 ||当前面的表达式的结果转成布尔值为false时，则值为后面表达式的结果

// && 
if (isLoggedin) { 
    goToHomepage(); 
    }  
isLoggedin && goToHomepage()
// || 

isLoggedin || goToHomepage()

三、实用网站

标题	链接	作用
正则大全	any86.github.io/any-rule/	正则表达式库，非常全，使用起来很方便
在线工具	tool.lu/	众多工具集合，包括时间戳转换，进制转换等
变量命名	unbug.github.io/codelf/	变量命名智能推荐（支持中文）
echarts	ppchart.com/#/	复杂的图表
在线 Postman	web.postman.co/	需要注册
兼容性查询	caniuse.com/	查询一个 js api 或者 css 属性的在各个浏览器的各个版本下的兼容性

四、浏览器技巧及插件

插件使用方法

　　1.下载安装文件

　　链接: 链接: pan.baidu.com/s/1RLHFjbVl… 提取码: ufuk

　　下载插件，并在浏览器安全提示时选择【保留】，在下载文件夹中找到下载好的文件，后缀是.crx。

　　说明：若出现安全提示，请选择保留。这是浏览器的默认设置，我们的插件不会危害你的计算机。

　　2. 打开扩展程序安装页面

　　复制chrome://extensions并粘贴到地址栏，按回车键进入扩展程序安装页面，打开右上角的开发者模式。

　　3. 安装插件

　　将下载好的.crx文件拖拽到到扩展安装页面内，等待数秒，在安装弹窗内点击添加即可。

网页截屏

首先打开chrome控制台（打开快捷方式 Option+Command+i）
打开命令行（打开快捷方式 shift + cmd + p 或 win系统 shift + ctrl + p)
其次在命令行输入“capture”可以看到如下注意：capture full size screenshoot和capture screenshoot的区别在于前者是整个页面完整信息的截图，后者只是当前页面的截图