I've developed an extension that reads a directory's package.json file. For the extension to work, you must be inside of a JavaScript file. I'm attempting to test this extension by using a test directory inside of the extension's src directory that houses a package.json file and an index.js file.
My goal is to allow the test to open the directory, open the index.js file and the run the tests there. This way the test directory goes anywhere the extension goes and the tests are predictable based on the package.json file I put into place.
How do I get the tests to open that test directory and run the tests from that specific index.js file?
I figured it out. I had to add the path to the directory into "args" array of the Extension Test object in launch.json.
"args": [
"${workspaceFolder}/src/test/test-directory/",
"${workspaceFolder}/src/test/test-directory/index.js",
"--extensionDevelopmentPath=${workspaceFolder}",
"--extensionTestsPath=${workspaceFolder}/out/test"
]
I was also able to have index.js open up as well. All of which I realized were totally useless in the tests that I were doing. But at least now I know how to do it and maybe someone else will, too.
Also, if you don't add ${workspaceFolder} in front of the directory you are referencing, VS Code assumes you want a new file created. So instead of opening the index.js file that I had available, it was creating a new empty file named index.js.
Related
I'm trying to figure out how to get the relative file path starting from the workspace folder. So for example if the workspace folder is called My App and the file path is to the current folder is
file:///c%3A/Users/Bob/Documents/My%20App/backend/connections/server.js
Then I want to be able to store in a variable only backend/connections/server.js so it would exclude the workspace folder with the %20 in it. Currently
vscode.window.activeTextEditor.document.uri;
outputs
file:///c%3A/Users/Bob/Documents/My%20App/backend/connections/server.js.
Is there a method I can call that I'm not using or an easy way to do this without having to do some regex expression?
The short answer: no
Visual Studio Code will does not pass any awareness of itself into the code it hosts. While you can access the $workspaceFolder variable inside Code's launch.json and tasks.json, your code itself doesn't have access to those variables.
And even if it could, as soon as you would move your code outside of your development environment, it would break, as that $workspaceFolder would no longer be there.
If you want to make provisions for doing special stuff while in a dev environment, you'll have to define what you consider the workspace folder to be - there is no way for you to get that dynamically.
I'm having more trouble than I'd like to admit to structure a simple project in Python to develop using Visual Studio Code.
How should I structure in my file system a project that is a simple Python package with a few modules? Just a bunch of *.py files together. My requisites are:
I must be able to step debug it in vscode.
It has a bunch of unit tests using pytest.
I can select to debug a specific test from vscode tab and it must stop in breakpoints.
pylint must not show any false positives.
The test files must be in a different directory of the main module files.
I must be able to run all the tests from the console.
The module is executed inside a virtual environment using python standard lib module venv
The code will use type hints
I may use another linter, even another test framework.
Nothing fancy, but I'm really having trouble to get it right. I want to know:
How should I organize my subdirectory: a folder with the main files and a sibling folder with the tests? Or a subfolder with the code and a subsubfolder with the tests?
Which dirs must have a init.py file?
How the tests should import the files from the module? Should I use relative imports?
Should I create a pytest.ini file?
Should I create a .env file?
What's the content of my launch.json the debugger file config in vscode?
Common dir structure:
app
__init__.py
yourappcode.py
tests (pytest looks for this)
__init__.py
test_yourunittests.py
server.py if you have one
.env
.coveragerc
README.md
Pipfile
.gitignore
pyproject.toml if you want
.vscode (helpful)
launch.json
settings.json
Or you could do one better. Ignore my structure and look at the some of famous python projects github page. Like fastAPI, Flask, asgi, aiohttp are some that I can think of right now
Also:
I think absolute imports are easier to work with compared to relative imports, I could be wrong though
vscode is able to use pytest. Make sure you have a testing extension. Vscode has a built in one im pretty sure. You can configure it to pytest and specify your test dir. You can also run your test from command line. If youre at the root, just running ‘pytest’ will recognise your tests dir if it’s named that by default. Also your actual test files need to start with prefix test_ i think.
The launch.json doesn’t need to be anything special. When you click on the settings button next to play button in the debug panel. Vscode will ask what kind of app is it. I.e If its a flask app, select python then select flask and it will auto generate a settings file which you can tweak however you want in order to get your app to run. I.e maybe you want to expose a different port or the commands to run your app are different
It sounds to me like you just need to spend a bit of time configuring vscode to your specific python needs. For example, you can use a virtualenv and linting in whichever way you want. You just need to have a settings.json file in the .vscode folder in your repo where you specify your settings. Configurations to specify python virtualenv and linting methods can be found online
I have a imported project in which I have files with following structure:
dir1
index1.html
dir2
index2.html
prewiew is showing me index1.html How would I change it to show index2.html in prewiew? I tried to change package.json file main attribute to "/dir2/index2.html" but it does not work
Codesandbox does not open the "main" file on opening a sandbox - it executes the "build" and "start" scripts in package.json (and other related scripts, such as pre-builds, etc), since that's what it needs to do to prep a package for running in their preview browser and/or node instance.
I'm trying to learn Vue.js as well so I create a simple folder called VueTest.
I have two files in the folder:
app.js
index.html
I found the info on how to configure the task runner to open up the current file and I have that setup to open in Chrome, which it does. However, because it's not running as a project, my index.html doesn't see the app.js file and so my Vue project is not working correctly. I just runs the HTML code an all I see is my mustache code (ex: {{Title}}).
How do I run files as a project?
If get it correct - you want to launch js app without opening teminals outside 'VS Code' then you have to see this
Have fun
I found my mistake, it's actually easy and I should have figured this out before posting.
To run Index.html on it's own, all I had to do was make a script reference in the page pointing to the app.js file. I didn't have to do that in JsFiddle.
you can't run files as a project in VS Code. it is just a text editor.
I have an Aurelia TypeScript project where my compiled JavaScript files go into the .../wwwroot subfolder and the original typescript files are located in .../src. I am trying to use the Chrome Debugger extension in VS code but breakpoints are not hit and when I turn on diagnosticLogging in launch.json the the mapped source is incorrect: It look in .../wwwroot/src/file.ts instead of .../src/file.ts.
I tried to solve this with sourceMapPathOverrides but with no success. It seems I cannot match my sourceRoot.
I tried this:
"webRoot": "${workspaceRoot}/wwwroot",
"sourceMapPathOverrides": {
"/src/*": "${workspaceRoot}/src/*"
},
This is the debug console output for finding the source to login.js:
›SourceMaps.loadSourceMapContents: Reading local sourcemap file from ...\wwwroot\dist\login.js.map
›SourceMap: creating for ...\wwwroot\dist\login.js
›SourceMap: sourceRoot: /src
›SourceMap: sources: ["login.ts"]
›SourceMap: webRoot: .../wwwroot
›SourceMap: resolved sourceRoot /src -> ...\wwwroot\src
›SourceMaps.scriptParsed: ...\wwwroot\dist\login.js was just loaded and has mapped sources: ["...\\wwwroot\\src\\login.ts"]
Note: The three dots ... stand for my removed path on disk to the project root.
How can I use sourceMapPathOverrides to have it lookup login.ts in .../src/?
Because of suggestion I tried to set webRoot to the workspaceRoot like this:
"webRoot": "${workspaceRoot}"
This way the mapped source file is correct and breakpoints work. But the log also says:
Paths.scriptParsed: could not resolve http://localhost:9000/dist/login.js to a file under webRoot: c:\Users\username\Source\Repos\myproject. It may be external or served directly from the server's memory (and that's OK).
The folder served by the webserver is the wwwroot subfolder in my project so from the description setting webRoot to workspaceRoot is wrong. What other problems might occur or is the suggestion of #Steffen valid?
To make sure, this is the folder structure
/ (project/source/git root)
/src (contains typescript, html files, is sourceRoot in source mapping)
/src/login.ts
/wwwroot (root folder served by dev web server, should be webRoot shouldn't it?)
/wwwroot/index.html (file opened by http://localhost:9000/ which starts Aurelia bootstrapper)
/wwwroot/config.js (SystemJS config, maps * to dist/* )
/wwwroot/dist (folder containing compiled application files)
/wwwroot/dist/login.js