智能化时代前端开发使用Amazon CodeWhisperer在vscode中编写代码

简介: 智能化时代前端开发使用Amazon CodeWhisperer在vscode中编写代码



一、概述

官网地址AI 代码生成器 - Amazon CodeWhisperer - AWS

1.Amazon CodeWhisperer使用您的 AI 编码配套应用程序更快、更安全地构建应用程序。

2.CodeWhisperer 经过数十亿行代码的训练,可以根据您的评论和现有代码实时生成从代码片段到全函数的代码建议。绕过耗时的编码任务,加速使用不熟悉的 API 进行的构建。

3.CodeWhisperer 可以标记或筛选类似于开源训练数据的代码建议。获取相关开源项目的存储库 URL 和许可证,以便您可以更轻松地查看它们并添加归因。

4.扫描您的代码以检测难以发现的漏洞,并获取代码建议以立即修复这些漏洞。遵循跟踪安全漏洞的最佳实践,例如开放全球应用程序安全项目 (OWASP) 概述的漏洞,或者不符合加密库最佳实践及其他类似安全最佳实践的漏洞。

5.从 15 种编程语言中进行选择,包括 Python、Java 和 JavaScript,以及您最喜欢的集成式开发环境(IDE),包括 VS Code、IntelliJ IDEA、AWS Cloud9、AWS Lambda 控制台、JupyterLab 和 Amazon SageMaker Studio。

二、功能

1.为您量身定制的实时代码建议

Amazon CodeWhisperer 经过数十亿行 Amazon 和公开可用代码的训练,可以理解用自然语言(英语)编写的评论,可以实时生成多个代码建议以提高开发人员的工作效率。该服务直接在集成式开发环境(IDE)代码编辑器中为完整的函数和逻辑代码块(通常由多达 10–15 行代码组成)提供建议。生成的代码与您编写代码的方式类似,符合您的风格和命名规则。您可以快速接受排在首位的建议(Tab 键)、查看更多建议(箭头键)或继续编写自己的代码。在接受代码建议之前,请务必对其进行审查,并且可能需要对其进行编辑以确保完全符合您的预期。键入时,CodeWhisperer 甚至会自行提供完成注释的建议。

2.支持热门编程语言和 IDE

Amazon CodeWhisperer 为多种编程语言提供基于人工智能(AI)的代码建议,包括 Python、Java、JavaScript、TypeScript、C#、Go、Rust、PHP、Ruby、Kotlin、C、C++、Shell 脚本、SQL 和 Scala。您可以使用来自多个 IDE 的服务,包括 JetBrains IDE(IntelliJ IDEA、PyCharm、WebStorm 和 Rider)、Visual Studio(VS)Code、AWS Cloud9、AWS Lambda 控制台、JupyterLab 和 Amazon SageMaker Studio。

3.经过优化,可与 AWS 服务配合使用

CodeWhisperer 通过提供针对 AWS API 进行优化的代码建议,让开发人员更高效地使用 AWS 服务,包括 Amazon Elastic Compute Cloud(Amazon EC2)、AWS Lambda 和 Amazon Simple Storage Service(Amazon S3)。当您在 IDE 中编写代码时,CodeWhisperer 会自动分析您的代码和注释。CodeWhisperer 建议使用相关的云服务和公共软件库来实现所需的功能,然后推荐符合 AWS 最佳实践的代码片段。

4.内置安全扫描

使用 CodeWhisperer,您可以扫描 Java、JavaScript 和 Python 项目以检测难以发现的漏洞,例如开放全球应用程序安全项目(OWASP)中排名前十的漏洞,或者不符合加密库最佳实践及其他类似安全最佳实践的漏洞。该服务分析 IDE 中的现有代码(无论是由 CodeWhisperer 生成还是由您编写),高度精确地识别有问题的代码,并对如何修复代码提供明智的建议。

5.负责任地编写代码:开源代码的引用跟踪器

CodeWhisperer 提供内置的引用跟踪器,用于检测代码建议是否可能与开源训练数据相似,并可以标记此类建议。这些建议用开源项目的存储库 URL、文件引用和许可证信息进行注释,因此您可以在决定是否采用建议的代码之前进行查看。您使用的所有已标记的建议都会被记录下来,以便您可以稍后查看并自行决定添加许可证归属。您也可以选择滤除 CodeWhisperer 认为与开源代码相似的所有代码建议。

6.负责任地编写代码:避免偏见

负责任地使用人工智能和机器学习(ML)技术是促进持续创新的关键。CodeWhisperer 帮助开发人员滤除可能被视为有偏见和不公平的代码建议,从而避免偏见。

7.企业管理

使用与 AWS IAM Identity Center 集成的单点登录(SSO)为用户或组提供对 CodeWhisperer 的访问权限。管理集团范围的策略,例如添加包含引用代码的建议。

三、费用方面

Amazon CodeWhisperer 直接在集成式开发环境 (IDE) 中为开发人员提供实时代码建议。个人开发人员可以免费使用 CodeWhisperer。组织为使用 CodeWhisperer 按“每位用户每月”支付固定的订阅费,无需预付费用或长期承诺。

四、在vscode中安装使用CodeWhisperer

第一步:在 IDE 集成开发环境中安装 Amazon ToolKit

在 IDE 集成开发环境中安装或更新 Amazon ToolKit 为最新版。支持的IDE集成开发环境包括 Visual Studio Code 以及 JetBrains IDE (IntelliJ IDEA, PyCharm, CLion, GoLand, WebStorm, Rider, PhpStorm, RubyMine, DataGrip) 。本文以 Visual Studio Code 为例进行安装和示范。

1.在VScode扩展插件中搜索AWS Toolkit,点击安装。

2.安装完成就能在VScode中看到安装的插件。

第二步:打开 ToolKit,随后点击 CodeWhisperer 下的 “Start” 按钮。我这个是安装过的,第一次或者重新认证的是显示的start.

第三步、登录Builder ID。

在弹出窗口中,选择“使用个人邮箱注册并登录 Builder ID”,点击右下角 Connect。

在登录时您将看到带有验证码的弹窗。请点击 “打开并复制验证码”,并使用验证码进行验证。

随后将跳转至登录注册页面。如果为首次使用,请用您的电子邮箱进行注册。注册和登录完毕后即可开始使用 CodeWhisperer。

这个直接从这个扩展窗口跳转到外部浏览器复制粘贴即可,不要想的太难,就是一个 Builder ID登录绑定过程。我刚开始还把AWS所有的注册登录窗口登录注册了一遍,发现没必要,也是老用户了。界面如图就表示已经链接成功了,然后就可以快乐的玩耍了。

五、如何使用 CodeWhisperer

1.开启 CodeWhisperer 服务后即可在编码时得到相应的代码建议:

  • 将光标放在一行代码或者代码注释的最后,通过回车键获取代码建议;或者在 Mac 中通过 “Option + C”,在 Windows 中通过 “Alt + C” 获取
  • 如果给到多个代码建议,可以通过方向键 “→” 和 “←” 进行切换查看
  • 使用 “Tab” 键接受代码建议
  • 使用 “Esc” 键或者通过敲入字符忽略代码建议

如在下图中,通过注释 # Get an item from DynamoDB table 写明函数所需做的工作为从DynamoDB表中获取数据。那么 CodeWhisperer 则会实时的给出所需的代码建议。如果给到多个代码建议,可以通过方向键 “→” 和 “←” 进行切换查看。如果选择接受某一条代码建议则可按 “Tab” 键进行接受。

新建一个js文件,写一个注释,使用快捷键 Alt + C 获取代码,这个比较快就几秒钟,然后使用快捷键Tab使用代码。发现效果还可以,比我手写的快一点。

这个经过我测试,一般这个只支持.js、.java、.py这种后缀格式的文件,一般.html或聊天对话它就不行了。

2.安全扫描

双击 CodeWhisperer 下的“运行安全扫描”即可开始对代码进行安全漏洞扫描。安全扫描完毕后,您可参考 IDE 中的扫描结果对代码进行修改。

直接把我现在这个项目扫出来两个漏洞,都是常见的问题,定位非常准确,点击问题里面的错误描述就能直接定位漏洞的位置。这个对于互联网公司来说那是相当的nice!

六、常见问题

1.什么是AWS CodeWhisperer?

CodeWhisperer 是一款 AI 编码伴侣,可在您的集成式开发环境(IDE)中生成实时单行或全函数代码建议,以帮助您快速构建软件。使用 CodeWhisperer,您可以用自然语言编写注释,用英语概述特定任务,例如“Upload a file with server-side encryption”。 基于这些信息,CodeWhisperer 直接在 IDE 中推荐一个或多个可以完成任务的代码片段。您可以快速轻松地接受排在首位的建议(Tab 键)、查看更多建议(箭头键)或继续编写自己的代码。在接受代码建议之前,您应该务必对其进行审查,并且可能需要对其进行编辑以确保完全符合您的预期。

2.CodeWhisperer支持哪些语言?

目前支持 Python、Java、JavaScript、TypeScript、C#、Go、Rust、PHP、Ruby、Kotlin、C、C++、Shell 脚本、SQL 和 Scala。除了 VS Code 和 JetBrains 系列 IDE(包括 IntelliJ、PyCharm、GoLand、CLion、PhpStorm、RubyMine、Rider、WebStorm 和 DataGrip)之外,CodeWhisperer 还可在 AWS Cloud9、AWS Lambda 控制台、JupyterLab 和 Amazon SageMaker Studio 上使用。

3.CodeWhisperer如何获得最佳效果?

开发人员注释简短且映射到较小的离散任务以使单个函数或代码块不会太长时,CodeWhisperer 工作效率最高。同样,开发人员为各种代码元素(例如,函数名称)使用直观名称时,CodeWhisperer 可以生成有用的代码建议。可用作环境上下文的代码越多,建议就越好。

七、总结

Amazon CodeWhisperer 提高开发人员生产力、代码质量和加快工作负载生产。通过使用 Amazon CodeWhisperer,开发人员能够将快速的完成项目,这有助于在重复性任务中保持持续性。能代码提示,能安全扫描。

目录
相关文章
|
23天前
|
JavaScript 前端开发 Docker
前端全栈之路Deno篇(二):几行代码打包后接近100M?别慌,带你掌握Deno2.0的安装到项目构建全流程、剖析构建物并了解其好处
在使用 Deno 构建项目时,生成的可执行文件体积较大,通常接近 100 MB,而 Node.js 构建的项目体积则要小得多。这是由于 Deno 包含了完整的 V8 引擎和运行时,使其能够在目标设备上独立运行,无需额外安装依赖。尽管体积较大,但 Deno 提供了更好的安全性和部署便利性。通过裁剪功能、使用压缩工具等方法,可以优化可执行文件的体积。
前端全栈之路Deno篇(二):几行代码打包后接近100M?别慌,带你掌握Deno2.0的安装到项目构建全流程、剖析构建物并了解其好处
|
5天前
|
前端开发 JavaScript
前端界的革命:掌握这些新技术,让你的代码简洁到让人惊叹!
前端技术的快速发展带来了许多令人惊叹的新特性。ES6及其后续版本引入了箭头函数、模板字符串等简洁语法,极大减少了代码冗余。React通过虚拟DOM和组件化思想,提高了代码的可维护性和效率。Webpack等构建工具通过模块化和代码分割,优化了应用性能和加载速度。这些新技术正引领前端开发的革命,使代码更加简洁、高效、可维护。
9 2
|
5天前
|
前端开发 JavaScript 测试技术
前端工程师的必修课:如何写出优雅、可维护的代码?
前端工程作为数字世界的门面,编写优雅、可维护的代码至关重要。本文从命名规范、模块化设计、注释与文档、遵循最佳实践四个方面,提供了提升代码质量的方法。通过清晰的命名、合理的模块划分、详细的注释和持续的学习,前端工程师可以写出高效且易于维护的代码,为项目的成功打下坚实基础。
13 2
|
10天前
|
监控 前端开发 JavaScript
前端开发的终极奥义:如何让你的代码既快又美,还不易出错?
【10月更文挑战第31天】前端开发是一个充满挑战与机遇的领域,本文从性能优化、代码美化和错误处理三个方面,探讨了如何提升代码的效率、可读性和健壮性。通过减少DOM操作、懒加载、使用Web Workers等方法提升性能;遵循命名规范、保持一致的缩进与空行、添加注释与文档,让代码更易读;通过输入验证、try-catch捕获异常、日志与监控,增强代码的健壮性。追求代码的“快、美、稳”,是每个前端开发者的目标。
27 3
|
12天前
|
设计模式 前端开发 JavaScript
揭秘!前端大牛们如何巧妙利用JavaScript,打造智能交互体验!
【10月更文挑战第30天】前端开发领域充满了无限可能与创意,JavaScript作为核心语言,凭借强大的功能和灵活性,成为打造智能交互体验的重要工具。本文介绍前端大牛如何利用JavaScript实现平滑滚动、复杂动画、实时数据更新和智能表单验证等效果,展示了JavaScript的多样性和强大能力。
29 4
|
12天前
|
自然语言处理 前端开发 搜索推荐
前端界的黑科技:掌握这些技术,让你的网站秒变智能助手!
【10月更文挑战第30天】随着前端技术的发展,网站正逐渐变成智能助手。本文探讨了四大关键技术:自然语言处理(NLP)使网站理解用户输入;机器学习实现个性化推荐;Web Notifications API发送重要提醒;Web Speech API实现语音交互。通过这些技术,网站不仅能更好地理解用户,还能提供更智能、个性化的服务,提升用户体验。
27 3
|
12天前
|
前端开发 JavaScript 开发者
前端开发的终极技巧:如何让你的代码既简洁又高效,还能减少bug?
【10月更文挑战第30天】前端开发充满挑战与创新,如何编写简洁高效且少bug的代码是开发者关注的重点。本文介绍五大技巧:1. 模块化,提高代码复用性;2. 组件化,降低代码耦合度;3. 使用现代框架,提高开发效率;4. 统一代码规范,降低沟通成本;5. 利用工具,优化代码质量。掌握这些技巧,让前端开发更高效。
25 1
|
17天前
|
JavaScript 前端开发 开发者
如何在 Visual Studio Code (VSCode) 中使用 ESLint 和 Prettier 检查代码规范并自动格式化 Vue.js 代码,包括安装插件、配置 ESLint 和 Prettier 以及 VSCode 设置的具体步骤
随着前端开发技术的快速发展,代码规范和格式化工具变得尤为重要。本文介绍了如何在 Visual Studio Code (VSCode) 中使用 ESLint 和 Prettier 检查代码规范并自动格式化 Vue.js 代码,包括安装插件、配置 ESLint 和 Prettier 以及 VSCode 设置的具体步骤。通过这些工具,可以显著提升编码效率和代码质量。
174 4
|
15天前
|
JavaScript 前端开发 开发者
如何在 Visual Studio Code (VSCode) 中使用 ESLint 和 Prettier 检查代码规范并自动格式化 Vue.js 代码
随着前端开发技术的快速发展,代码规范和格式化工具变得尤为重要。本文介绍如何在 Visual Studio Code (VSCode) 中使用 ESLint 和 Prettier 检查代码规范并自动格式化 Vue.js 代码。通过安装和配置这些工具,可以确保代码风格一致,提高代码质量和可读性。
42 1
|
19天前
|
前端开发 JavaScript 开发者
揭秘前端高手的秘密武器:深度解析递归组件与动态组件的奥妙,让你代码效率翻倍!
【10月更文挑战第23天】在Web开发中,组件化已成为主流。本文深入探讨了递归组件与动态组件的概念、应用及实现方式。递归组件通过在组件内部调用自身,适用于处理层级结构数据,如菜单和树形控件。动态组件则根据数据变化动态切换组件显示,适用于不同业务逻辑下的组件展示。通过示例,展示了这两种组件的实现方法及其在实际开发中的应用价值。
27 1