谈谈p5js编辑器

小菜的读者中有使用 p5js 进行学习和创作的，私信我想了解下 p5js 除了 Processing 软件的 p5js 模式，还有什么编辑器可以用。

这里小菜就单独开一篇文章来说下这事。总之，如果不想折腾，就老老实实用 Processing 写就行啦。关键是创作嘛。编辑器真的“没那么重要”。

不过如果使用 p5js 的读者想获得好的编辑体验，那还是可以说道说道的。

小菜这里列举下 p5js 可以用到的编辑器。

官方 Web 编辑器

https://editor.p5js.org

这个网站嘛，一言难尽，辑体验，也是一言难尽，竟然连代码提示都没有。

评分：★☆☆☆☆

OpenProcessing 网站

OpenProcessing 大家伙都知道，上面有丰富的作品展示，我们从上面可以学到很多优秀的创意实现。我们可以在这个网站上，直接进行 Javascript 代码的编写，可以打开设置的右侧边栏，进行效果预览。

如果想要引入外部库，那么需要升级Plus+，当然这个是要付费。

评分：★★★☆☆

Processing 软件的 p5 模式

这个体验只能说一般般，但受众广，也是目前的主流方式吧。高校的学生，如果使用 p5js 教学，用这个可能比较多。

评分：★★★☆☆

Visual Studio Code + p5Canvas插件 + p5js Snippets

Visual Studio Code 是微软公司出品的一款编辑器，核心功能稳定，配合社区强大的插件，可以提升很多编辑体验。

p5js Snippets 用来提供代码提示

p5Canvas用来提供画布预览

可以在只有一个 js 文件的情况下，点击 VSCode 下方的 p5Canvas 便可以直接预览。修改 js 代码的同时，右侧也会同时刷新。

评分：★★★★☆

Visual Studio Code + Live Server

p5Canvas 插件只需要一个 js 便可以右侧实时改动预览，但如果使用了 html，那么我们便需要一个插件，能够在本地机器启动一个 http 服务器，这时候浏览器会打开一个预览的网址，一般是 本机 IP 地址加一个随机端口号，再加 html 文件的路径，如 http://127.0.0.1:5500/Day_017/index.html。（当然 p5js Snippets 代码提示插件还是需要安装的）

评分：★★★★★

结论

以上评分仅是小菜个人使用体验得出的结论，如果和大家的不一致，不要喷哈。😂

还是那句话，专注于创作本身。别本末倒置哈，小菜只是喜欢折腾。

如果大家有不明白的，欢迎留言。

小菜与老鸟后期会不定期更新一些 Processing 绘制的代码思路分析，欢迎关注不迷路。

如果有收获，能一键三连么？