检测客户端浏览器是否支持 Cookien
Cookie 的主要功能是保存状态和识别身份。因此，Cookie 可以在许多情况下使用查看浏览器ecmascript，尤其是在用户经过身份验证时。例如，实现严格的跨页全局变量。它的通常用途包括保存用户登录状态、跟踪用户行为、自定义页面、创建购物车等。n
Cookie 似乎有很多用途，但在使用它们之前，Web 开发人员必须先检查用户的浏览器是否支持 cookie，否则会导致很多错误消息。n
示例：检测浏览器是否支持 Cookie 功能。如示例代码所示。n
//判断浏览器是否支持cookie
if(navigator.cookieEnabled)
{
document.write("你的浏览器支持cookie功能");//提示浏览器支持cookie
}
else
{
document.write("你的浏览器不支持cookie");//提示浏览器不支持cookie
}
n
【运行结果】打开网页文件并运行程序。n
【代码分析】此代码片段的目的是检查浏览器是否启用或支持 cookie。最重要的是掌握一种方法，即代码中的navigator.cookieEnabled，可以用来通过使用浏览器的cookieEnabled方法检查浏览器是否支持cookie。n
注意：Cookie 似乎具有上述优点，但它也有缺点查看浏览器ecmascript，例如 Cookie 可能被禁用、Cookie 与浏览器相关、保存在不同浏览器之间的 Cookie 无法相互访问、Cookie 可能会被删除以及 Cookie 安全性不够高，因此请谨慎使用。n","to":"zh-Hans","sentLen":{"srcSentLen":[54,72,94,59,122,185,69,29,10,54,117,199,299],"transSentLen":[23,26,35,16,38,70,27,9,10,21,39,85,123]}}]}]
作者丨单尾莺
关联
大家好，我是小F。
本文不比较任何编辑器，但是我日常使用vscode进行开发，比较喜欢折腾vscode。 我会到处寻找这些有趣的插件，所以我积累得越来越多。 明天我会推荐我收藏的 60 多个。 vscode插件，听说插件安装太多的话编辑器会卡住。 可能是我的笔记本配置还可以承受，暂时还没有卡的感觉。
然后我会通过优化外观、功能扩展、提高编码效率、低代码格式等插件来介绍。
注：本文仅涉及该插件的基本使用，即让您知道有这样一个插件，并大致了解这个插件能做什么。 一些插件的详细配置过于复杂。 如果您有需要，请亲自去滑水。 根据每个人的笔记本、vscode配置、插件不同，有些插件可能在你的笔记本上不生效。 本文提到的快捷键均是Windows下的，其他操作系统的快捷键请自行了解。
好马配好鞍，好看的编辑器可以提高程序员的编码体验，改善开发者的心情，让写bug更有动力。
更好的评论
一款美化注释的插件，可以根据不同类型的注释显示不同的颜色，一目了然。
安装后，插件默认会自带几种颜色的注释，你也可以通过vscode的配置文件自定义任意颜色和类型的注释。 具体的配置方法我来给你了解一下。
BracketPairColorizer/BracketPairColorizer2
这是一个找对象的插件，不是帮你找对象，而是帮你找到另一半括号。 目前有两个版本。 BracketPairColorizer2 是一个改进版本。 改进了什么我还没有深入研究。 而且它有很多设置项。 总之安装后默认配置就够了。 有兴趣的朋友可以自己寻找更多有趣的玩法。
你可以看到匹配的括号是相同的颜色，但是当我选择一个括号时，会出现一条线来帮助你找到它对应的另一半括号。
突出显示匹配标签
这也是一个寻找对象的插件。 它寻找带有标签的对象。 看我之前插件的演示图。 当我点击 html 标签时，配对标签上会出现逗号，以指示谁与谁是一对。
中国人
把你的vscode变成英文，只有像我这样弱的法国鸡才能用，掠夺者跳过它。 为什么要放在优化外观一类，因为我觉得英文比英文好，安装完重启就可以了。
颜色高亮
看名字就知道，它是一个在我们代码中高亮显示颜色的插件。 右图中可以看到我设置的css颜色属性，显示很直观。
社区材料主题/材料主题
有许多外部选项可用于更改编辑器的主题。 我使用 MaterialThemePalenightHighContrast。 安装完成后，点击设置颜色主题。
材质主题图标
对于设置文件图标，这个插件看起来像这样，还有很多其他更改文件图标的插件。 如果你不喜欢这个，你可以自己找一个。
错误槽
报错的地方有红色大波浪线提示，可以说非常直观。
图片预览
预览代码中图片的引用，键盘上移时图片会显示在小窗口中。
凹进彩虹
看名字就知道，彩虹缩进就是针对代码的不同缩进显示不同的颜色。
指示器
当你点击缩进的部分时，会出现一条白线告诉你当前的缩进级别，让你更方便地查看代码结构。
尾随空格
显示尾随空格。
VSCode 伟大的图标
又一个更改文件图标的插件，我用的就是这个，比起MaterialThemeIcons我更喜欢这个风格，冬瓜生菜可就爱了，你们各取所需吧。
编辑器本身的功能还是有限的。 为了应对日常开发，还得安装很多其他软件来辅助。 不过，一些常用的辅助软件也可以通过插件的形式引入。 它们的功能可能没有原来的那么强大，但基本上已经够用了，而且确实很方便。
AZALDevTools/ALCodeOutline
用于整理代码结构的插件安装后文件图标中会有一个ALOUTLINE的选项。
为了演示，我找了一个比较长且典型的Vue文件。 请忽略我的代码内容，专注于插件的功能。 可以看到第一层是很有Vue单文件组件特点的模板、脚本、样式。 逐层展开可以看到dom节点、上面方法定义的功能等，然后点击即可快速定位目标位置。 爸爸再也不用怕我全球搜寻了！
注意：好像默认是展开的。 应该可以设置默认是否展开，不过我没有研究过。 有兴趣的掠食者可以深入研究一下。
代码运行者
运行代码，可以在编辑器中查看结果，后端的朋友可以在控制台查看console.log，还有很多其他的玩法，具体使用请参考这篇文章
代码If
我在网上听到一句话，计算机科学中只有两件难事：缓存失效和命名。 哈哈哈，是的，开发项目时，命名总是一件令人头疼的事情。
而命名是开发过程中非常重要的事情。 一个好的函数命名可以让你立刻明白它所实现的功能。 因此，每当开发过程中遇到要命名的变量、函数、类时，都要好好思考。 各种翻译。
不过CodeIf的出现轻松解决了这个问题。 它搜索 GitHub、Bitbucket 和 GitLab 来查找真实使用的变量名称，并为您提供一些常用的单词。
使用时只需选择变量名，然后右键选择CodeIf即可跳转到网页并显示候选名称。
颜色信息
一个查看详细颜色信息的插件，可以在小窗口中显示颜色值，如rgb、hsl、cmyk、hex等，并且可以在配置项中添加要显示的信息类型。
代码拼写检查器
检查代码中短语的拼写是否正确。 当短语异常时，底部会出现波浪线提醒您。 您还可以自定义词典并忽略对特定短语的检测。 更多使用方法请参考下面的链接。
Chrome 调试器
该插件是专门为后端调试而开发的。 调试起来非常方便。 它具有与微软控制台相同的功能。 安装后，无需打开浏览器的控制台进行断点调试。 相应的还有DebuggerforFirefox、DebuggerforMicrosoftEdge等，其他的我都没用过。 您可以根据需要安装它们，使用方法应该有所不同。
安装完成后，右侧会出现一个调试小图标。 打开后点击上面的小虫进行配置。 .vscode 文件夹和 launch.json 文件将在根目录中手动创建，不用担心。
配置文件的具体内容和使用方法可以看这篇文章，写得很详细。
Git历史记录
右键单击该文件并选择 Git: ViewFileHistory 以列表形式查看所有提交记录。
GitLens——Git 增压
这也是一个与git相关的插件，功能比上一个更强大。 在上一个插件的演示图中，可以看到我的每一行代码都有最后一次git提交的记录，这就是这个插件的功劳。
其他操作还有很多，详细请参考下面的链接。
Leet代码
可以在vscode里刷算法题。我自己没用过
当地历史
这个很强大，本地代码的变更记录。 一般来说，如果我们代码出错了，我们可以撤销它，撤销之后再改。 很难取消撤消。 通过这个插件，你可以直接看到代码的变更记录。 也可以和现在的版本相比，利器。
安装完成后，会在项目根目录下手动生成.history文件夹。 代码更改记录在这里。 记得加上.gitignore，不然每次提交代码都会受到重创。
在浏览器中打开
在浏览器中打开 html 文件。
安装完成后，右键点击目标html文件，选择openindefaultbrowser即可用浏览器打开该文件。
部分差异
文件比较领域的大牌一定是BeyondCompare，而且是免费的！ 这样一来，神奇的插件PartialDiff就成为了一个很好的替代品。 选择一段代码，右键SelectTextforCompare，选择另一部分代码，右键CompareTextwithPreviousSelection。我的是英文的，所以更明显
邮政编码
Postman听说过，这个插件基本上可以理解为在vscode上使用postman。
安装完成后，两侧菜单中会出现一个小包图标。 点击之后，点击CreateRequest就可以正常使用了。
专案经理
项目经理适合经常切换项目的掠夺者。 虽然平时接触的项目不多，但是也有很多好玩的项目。 使用此插件，无需在新窗口中打开项目。
安装完成后，两侧列表中会出现一个文件夹的小图标。 点击后就可以管理项目了。 通常，您操作projects.json 文件。 单击项目名称进行切换，或打开新窗口。
Quokka.js
实时显示代码的运行结果，使用方法请跳转链接
如何达到最终的编码效率，其实就是你能不能手写。 下面这个插件就是辅助你进行一些手动操作，让你可以节省很多抓鱼的时间。
自动导入
Typescript手动导出，虽然现在很多插件基本上外部都有这些功能，但是已经没有必要了。可能是因为我安装了各种奇奇怪怪的插件。 现在想导出东西的时候，提示很多ecmascript点击脚本，导入任意一个都可以。
自动重命名标签
手动更改标签名称，重命名开始标签时，手动重命名配对的结束标签。
所有相应的改变一下子就完成了，不是很好吗？
改变大小写
快速切换变量格式，大驼峰、小驼峰、逗号等等，种类很多。 如何使用 按F1（Windows）并输入相应的命令。
CSS 预览
您可以通过单击类名快速找到样式的定义。 不知道是不是我自己的原因，有时候会失败，需要点击禁用，然后点击启用才能工作。具体使用参考链接
ECMAScriptQuotesTransformer
用于模板字符串和普通字符串拼接之间的转换，但毕竟我日常开发基本都是统一使用模板字符串，这些相互转换的需求很少。
使用方法也很简单，选择需要转换的行，按f1输入命令，一般输入esq就会出现提示。
拥抱
快速在选中的代码两边添加各种冒号和括号，不用来回使用联通光标，不过目前市面上的编辑器似乎大部分都对外有这个功能
文件工具
创建、复制、连接、重命名和删除文件和目录的便捷方法。 演示图片来自官网。
javascriptconsoleutils
后端人员的调试少不了console.log，所以这是一个快速生成console.log的插件。 使用方法很简单，选中变量，然后按ctrl+shift+L即可生成。 当需要删除时，按ctrl+shift+D即可删除。
json2ts
手动将json格式转换为ts类型，复制json并按ctrl+alt+v。
koro文件头
一个用于手动添加回注释和函数注释的插件。 支持自定义内容，需要在settings.json中自定义。
"fileheader.customMade": {
"Author": "一尾流莺",
"Description": "",
"Date": "Do not edit",
"LastEditTime": "Do not edit",
"FilePath": ""
},
"fileheader.cursorMode": {
"description": "",
"param": "",
"return": ""
},秘银埃米特
快速生成代码结构，不过似乎新版本的vscode已经外化了。
路径智能感知
导入文件时，路径是手动填写的。
Npm 智能感知
导出npm包时，会有智能提示。
pxtorem 和 rpx (cssrem)
手动转换单位的插件。
很简单，出现提示后按回车即可。
TurboConsoleLog
另一个用于生成console.log的插件。 不同的是它支持自定义console.log的内容，包括文件名、路径、大小等，还可以添加自己喜欢的emoji表情，快捷键 ctrl+alt+L 。
代码片段插件
这种类型的插件有很多，但它们的功能都是提供代码片段。 功能是用几个字符的缩写打出整个代码。
美化
代码是低级的，我好像已经安装了但是不起作用。 我仍然使用 eslint+prettier。 如果你有正在使用的男伙伴，可以在评论区发表你的想法。 如果您有兴趣，请自行搜索使用方法。
ESLint
代码检查就不用说了，如果不符合规范，它就会给你报错，或者给你警告。 具体规范需要在根目录下新建.eslintrc.js文件进行配置。 您也可以使用许多大公司现有的规格。 太复杂了，我就不详细说了。 我将发布教程的链接。
Prettier-代码格式化程序
代码底层插件，这个插件一般和eslint一起使用，也可以单独使用。
在根目录下新建一个.prettierrc.json文件，在上面写上你想要的格式。更具体的配置内容查看链接
维图尔/掌
使用vue开发的男人一定要和他们打交道。 Volar与vue3的兼容性更强，功能也更多。 因为这两个插件的功能太大了，就不说了。 如果您有兴趣，可以自行搜索并使用。
不仅有功能插件，还有很多花里胡哨的东西。 给大家介绍几个可能对开发影响不大，而且很好玩的插件。
欺负
还记得小时候玩过的操纵杆游戏吗？ 掠食者已经为我们发布了插件，但还是要提醒大家：游戏有风险，钓鱼需谨慎！
操作非常简单。 安装后，右侧会出现游戏摇杆图标。 点击打开即可下载游戏来玩。
表情符号
代码中添加emoji表情，我不只是写了一些注释，console.log基本没有其他作用，很好玩。 别人看到你码人的各种小表情就会觉得你是个帅哥。
其官方示例还可以设置emoji作为变量名。 我不建议你这样做。 使用方法也非常简单。 按f1（windows）输入emoji，可以看到有三个选项，分别是emoji表情、markdown下的emoji、unicode下的emoji。 选择模式并按“Enter”进入列表ecmascript点击脚本，然后按“Enter”输入代码。
设置同步
可以同步vscode配置的插件，因为我没有换过笔记本，所以自己没有测试过，网上也有蛮多人在用。
千山万水始终有情，敬请订购。
