前言

是否为还不会使用AI工具而烦恼？是否还只会在网页中提问AI后再复制代码？这里将给大家分享下怎么在前端项目中使用AI编码辅助插件。PS: 本人也刚才开始使用，用得也十分粗浅。

AI插件的安装

现在有很多免费的AI插件都可以使用，功能都大差不差，可以选个自己喜欢的。这里推荐三个，在vscode插件中搜索即可：

  • MarsCode AI
  • TONGYI Lingma
  • AWS Toolkit

从注释开始

在项目中最简单的应用就是 注释，没错，就是注释，只需在要写的代码前先写注释，AI就会根据注释生成相应代码提示，对于习惯写注释的童鞋来说，简直就是福音，没有写注释习惯的童鞋，现在写还来得及！！！

举个栗子

下面写一个简单的例子：

  1. 编写变量，用注释的方式写出变量名称
    如这里打出规格名称，AI会自动在下方给出代码提示，此时按tab键则直接会写出代码提示。
    如果没有提示或提示错误，可以自己写，写出const 时，AI也会给出后面的代码提示。

  2. 编写其他变量
    在这个变量下方添加其他注释，AI会根据上面的变量的内容，自动给出相应代码提示。

  3. 编写函数
    一般获取上面的specList会通过接口，我们先引入接口。

    然后在函数下方添加注释，AI会根据上面的接口，自动给出相应代码提示，此时按tab就好了。

规范代码

如果本身写的项目及代码就有好的规范，那么AI给的代码提示会更准确。

如 import 相关组件、依赖、方法时，将他们相应的分类编写，如果变量命名、文件命名很规范，AI能更准确的给出想要的代码。

结语

AI是一个强大的工具，这里只是简单的分享了下我在前端中的使用，还有更多的强大功能有待大家去探索，比如代码文件分析、寻找bug、优化代码等，插件也提供了复制、直接插入、生成文件等方便的操作提升效率。
所以快点从注释开始用起来（现在没有理由说注释浪费时间，降低效率了吧）。