/tags/%E4%BB%A3%E7%A0%81%E7%BC%96%E8%BE%91%E5%99%A8/Recent content in 代码编辑器 on 一极乐Hugo -- gohugo.iozh-cnblog4@outlook.com (堃埜)blog4@outlook.com (堃埜)Copyright © [site_title]Wed, 29 May 2024 19:50:11 +0000/log/519/Wed, 29 May 2024 19:50:11 +0000blog4@outlook.com (堃埜)/log/519/<p>发现使用 CODEPEN 的时候，不会自动完成标签也没有标签提示，用起来特吃力。</p> <p>像 VSCode 一般可以安装 Auto Complete Tag 或者 Auto Complete Tag，自动添加HTML/ML关闭标签（结束标签）。</p> <p>其实 codepen 也是有这样功能的，需要自己去设置，一般我们都会修改 pen 的设置，实际上要去全局设置中修改。</p> <h2 id="codepen-开启自动关闭标签功能的步骤enable-autocomplete">codepen 开启自动关闭标签功能的步骤（enable Autocomplete） </h2><p><img src="/usr/uploads/2024/20240619_151710.webp" loading="lazy" ></p> <ol> <li>打开 <a class="link" href="https://codepen.io/" target="_blank" rel="noopener" >https://codepen.io/</a> 登录你的账号</li> <li>打开 <a class="link" href="https://codepen.io/" target="_blank" rel="noopener" >https://codepen.io/</a> ，找到 <code>Editor Options</code> 或者直接 Ctrl + F 搜索</li> <li>勾选「Autocomplete」（自动完成）</li> <li>勾选后会自动保存修改，这个试试再打开一个 pen 试试看，是不是已经会自动完成 HTML</li> </ol> <h2 id="codepen-的-autocomplete-功能可以做什么">codepen 的 Autocomplete 功能可以做什么 </h2><ul> <li>输入标签名，按 Tab 键，自动填写开始标签和结束标签，比如： <ul> <li>p → <code>&lt;p&gt;&lt;/p&gt;</code></li> <li>div → <code>&lt;div&gt;&lt;/div&gt;</code></li> <li>a → <code>&lt;a href=&quot;&quot;&gt;&lt;/a&gt;</code></li> </ul> </li> <li>输入 HTML 的时候会有标签或属性提示</li> <li>输入 CSS 的时候会有属性或值提示 <ul> <li><img src="/usr/uploads/2024/20240619_153056.webp" loading="lazy" ></li> </ul> </li> </ul>