# Trouble setting up p5 in Visual Studio Code

**URL:** <https://discourse.processing.org/t/trouble-setting-up-p5-in-visual-studio-code/1324>\
**Category:** Beginners\
**Created:** [June 27, 2018, 10:47pm UTC](https://discourse.processing.org/t/trouble-setting-up-p5-in-visual-studio-code/1324 "2018-06-27T22:47:16Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![GiaFil7](https://avatars.discourse-cdn.com/v4/letter/g/cdc98d/32.png) [@GiaFil7](https://discourse.processing.org/u/GiaFil7)\
**Post date:** [June 27, 2018, 10:47pm UTC](https://discourse.processing.org/t/trouble-setting-up-p5-in-visual-studio-code/1324/1 "2018-06-27T22:47:16Z")

</div>

So I am new to HTML and Javscript, and I 'm trying to setup p5.js in VSC. I’ve installed the p5 snippets extension and my index.html file looks like this:

```auto
<html>
<head>
    <title>p5 Test</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet">
    <script language="javascript" type="text/javascript" src="/p5/p5.js"></script>
    <script language="javascript" type="text/javascript" src="/p5/p5.dom.js"></script>
    <script language="javascript" type="text/javascript" src="/p5/p5.sound.js"></script>
    <script src="sketch.js"></script>
</head>
<body>
</body>
</html>

```

I’ve created a basic sketch.js file that looks like this:

```auto
function setup () {
  createCanvas(400, 600);
  background(0);
}

function draw () {
}

```

The problem is that it says that `createCanvas` is not defined, which means that the library doesn’t load. However, the 3 p5 file paths are correct (Ctrl + click opens the correct file). I’m not sure why this is happening… Any help would be appreciated!

---

<div class="post-metadata">

**Author:** ![GoToLoop](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/gotoloop/32/86_2.png) [@GoToLoop](https://discourse.processing.org/u/GoToLoop)\
**Post date:** [June 27, 2018, 10:54pm UTC](https://discourse.processing.org/t/trouble-setting-up-p5-in-visual-studio-code/1324/2 "2018-06-27T22:54:17Z")

</div>

Maybe remove the initial `/` from the paths? 🤔  
“/p5/p5.js” -\> “p5/p5.js”

You can also test-run my minimum “index.html” template I use for my own sketches: 😇

```auto
<script defer src=https://cdn.JsDelivr.net/npm/p5></script>
<!--<script defer src=https://cdn.JsDelivr.net/npm/p5/lib/addons/p5.dom.min.js></script>-->
<!--<script defer src=https://cdn.JsDelivr.net/npm/p5/lib/addons/p5.sound.min.js></script>-->
<script defer src=sketch.js></script>

```

---

<div class="post-metadata">

**Author:** ![GiaFil7](https://avatars.discourse-cdn.com/v4/letter/g/cdc98d/32.png) [@GiaFil7](https://discourse.processing.org/u/GiaFil7)\
**Post date:** [June 27, 2018, 11:03pm UTC](https://discourse.processing.org/t/trouble-setting-up-p5-in-visual-studio-code/1324/3 "2018-06-27T23:03:43Z")

</div>

I found the problem. For some reason it conflicted with the JavaScript Standard Style extension… Disabling it fixed the problem.

---

<div class="post-metadata">

**Author:** ![W1nDs0R](https://avatars.discourse-cdn.com/v4/letter/w/439d5e/32.png) [@W1nDs0R](https://discourse.processing.org/u/W1nDs0R)\
**Post date:** [July 25, 2018, 11:41am UTC](https://discourse.processing.org/t/trouble-setting-up-p5-in-visual-studio-code/1324/4 "2018-07-25T11:41:01Z")

</div>

Hey there,

I seem to be having a similar problem but with SublimeText 3. I am using Browser sync to test the code in the browser, the main.js script is appearing in the insepctor and I can open the code however its not displaying in my index.html test window.

I have an Index.html setup as follows:

```auto
<html>
<head>
	<meta charset="UTF-8">
	<script language="javascript" type="text/javascript src="libraries/p5.js"></script>
	<script language="javascript" type="text/javascript src="libraries/p5.min"></script>
	<script language="javascript" type="text/javascript src="main.js"></script>

</head>
<body>

</body>
</html>

```

and then the main.js is as follows, which works fine on the online p5.js editor.

```auto
function setup() {
createCanvas(480, 120);
strokeWeight(2);
}
function draw() {
background(204);
for (var i = 20; i < 400; i += 20) {
line(i, 0, i + i/2, 80);
line(i + i/2, 80, i*1.2, 120);
}
}

```

Why am I unable to get the index.html to load the main.js file when it seems to be connected fine?

Any help would be massively appreciated, all the best!  
Josh

---

<div class="post-metadata">

**Author:** ![GoToLoop](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/gotoloop/32/86_2.png) [@GoToLoop](https://discourse.processing.org/u/GoToLoop)\
**Post date:** [July 25, 2018, 11:48am UTC](https://discourse.processing.org/t/trouble-setting-up-p5-in-visual-studio-code/1324/5 "2018-07-25T11:48:52Z")

</div>

> [@Code 800A0404 issue](https://discourse.processing.org/t/code-800a0404-issue/2036/3):
>
> Easiest & fastest recipe to run “.js” sketches under p5.js: running_man Install any Firefox-based browser in your OS and use it to open your “index.html” file: fox_faceInstall Notepad2 or Notepad++ (or both) in your OS and use it to type in your “sketch.js” file there: scroll[https://XhmikosR.GitHub.io/notepad2-mod/](https://XhmikosR.GitHub.io/notepad2-mod/)[https://Notepad-Plus-Plus.org](https://Notepad-Plus-Plus.org) You can setup those text editors to use UTF-8 and LF line endings for better compatibility. bulbHere’s my minimum “index.html” te…

---

<div class="post-metadata">

**Author:** ![W1nDs0R](https://avatars.discourse-cdn.com/v4/letter/w/439d5e/32.png) [@W1nDs0R](https://discourse.processing.org/u/W1nDs0R)\
**Post date:** [July 25, 2018, 11:56am UTC](https://discourse.processing.org/t/trouble-setting-up-p5-in-visual-studio-code/1324/6 "2018-07-25T11:56:29Z")

</div>

Thanks so much!  
Seems to work now so maybe i’ll ditch Sublime Text and Opera, would you say firefox and notepad++ is an optimal workflow for developing graphical applications or could you give some advice on workflow too?

Thanks so much,  
Josh

---

<div class="post-metadata">

**Author:** ![GoToLoop](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/gotoloop/32/86_2.png) [@GoToLoop](https://discourse.processing.org/u/GoToLoop)\
**Post date:** [July 25, 2018, 12:06pm UTC](https://discourse.processing.org/t/trouble-setting-up-p5-in-visual-studio-code/1324/7 "2018-07-25T12:06:50Z")

</div>

> [@W1nDs0R](#):
>
> Would you say Firefox and Notepad++ is an optimal workflow for developing graphical applications…

Notepad++ and other similar frugal text editors are more geared towards small projects like Processing sketches and quick file edits.

IDEs like Sublime, Atom, Brackets, Eclipse, etc., are more appropriate for bigger projects.

Firefox and its derivatives browsers can run “.js” code directly under the `file://` scheme.

Chromium-based browsers can do it too, though w/ some limitations, if we run it w/ a modified shortcut w/ an “–allow-file-access-from-files” argument: [Chrome-allow-file-access-from-file.com/](http://Chrome-allow-file-access-from-file.com/)

---

<div class="post-metadata">

**Author:** ![byxx](https://avatars.discourse-cdn.com/v4/letter/b/df705f/32.png) [@byxx](https://discourse.processing.org/u/byxx)\
**Post date:** [November 11, 2019, 7:18pm UTC](https://discourse.processing.org/t/trouble-setting-up-p5-in-visual-studio-code/1324/8 "2019-11-11T19:18:40Z")

</div>

Would you do web design with p5 for an entire web page?Is it possible?  
What is the role of p5 in web design if being merely a part only?  
THX