How to run files as a project in VS Code? - visual-studio-code

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.

Related

How to run the SAPUI5 sample apps - index.js is missing

I would like to test different UI5 Sample apps (I was trying to run them in plunker), however the index.html file for every sample app I have downloaded requires index.js - however this JS file is not part of the zip.
If I remove the reference to index.js, but the App won't run - there is obviously some init code missing, which I am assuming is inside the missing index.js file.
Here is the basic Page Sample (click the download link in the top right to get the zip).
Here's what happens when I move all the files to Plunker as-is.
You'll notice on line 20 of index.html, it is trying to include index.js, but this file isn't found, thus there is a 404 error in the console.

How to open a file in vscode from browser?

I want my webapp to be able to open a given file in VS code. For example, when I click a button on my webapp, a file say, C:\Users\...\myProject\index.html is opened, if myProject is already opened it should navigate to index.html
I know its a peculiar use case but I want to know if its possible in vscode.
Its also completely fine if it requires using browser or vscode extension.
vscode://file/{full path to project}/
Thanks to fbg13 for providing this link
It is possible if you are using Firefox:
Open the about:config page.
Set the view_source.editor.external to true.
Set the view_source.editor.path to the VSCode's executable absolute path.
It is possible if you add this link:
vscode://file/{fullpath}:{numrow}
Example for Symfony 5.3 and higher
For example in Symfony to use the link that appears in the debug bar of the controller used you can do it as described in the examples. You have to edit your project config.
Only for VS Code:
config\packages\framework.yaml
framework:
ide: 'vscode://file/%%f:%%l'
For any editor through env:
config\packages\framework.yaml
framework:
ide: '%env(resolve:CODE_EDITOR)%'
And don't forget to add value for CODE_EDITOR into .env or .env.local.
Local
This is an example for local projects.
.env or .env.local:
CODE_EDITOR=vscode
# or
CODE_EDITOR=vscode://file/%%f:%%l
Docker
If you use Docker or trying to open a file from remote server, you may use this example.
.env or .env.local:
# Template
CODE_EDITOR=vscode://file/%%f:%%l&/PATH/TO/YOUR/SERVER/APP>/PATH/TO/YOUR/LOCAL/APP
# Real paths
CODE_EDITOR=vscode://file/%%f:%%l&/app/>/home/user/projects/symfony_project/
For more details see these pages:
Symfony Framework Configuration Reference - ide
Opening VS Code with URLs
You can install vscode-handler to open files like this
vscode://open?url=file://%file&line=%line

How to add more script files in Google Web Starter Kit?

I am trying to start a new project with Web Starter Kit from Google. Thing is if I add another script alongside the main.js, then it doesn't seem to be compiled to dist folder, nor included inside the main.js
Any ideas?
In `gulpfile.babel.js
"Since we are not using useref in the scripts build pipeline, you need to explicitly list your scripts here in the right order to be correctly concatenated"

Ajax Controls Toolkit and Ajaxmin

I am learning how to use the Ajax Control Toolkit using VB.NET in code-behind in Visual Studio 10.0.40219.1 SP1Rel, .NET 4.0.30319 SP1Rel. I have been to many websites and tried lots of code, using the AnimationExtender. The sample that came with the toolkit works perfectly, but on
http://localhost:1049/
which is different from my "view code in browser" url:
http://localhost:4258/
When I change the url to mine, I get this error:
Could not load file or assembly 'AjaxMin, Version=4.97.4951.28478, Culture=neutral, PublicKeyToken=21ef50ce11b5d80f' or one of its dependencies. The system cannot find the file specified.
Nothing in the installation instructions mentions this. I can't run the page I'm using to learn how to use the AnimationExtender. I am at a loss, and I can't find anything like this on Google or here.
Thanks!
Matty's suggestion to check the sample project sent me back to the directory where I'd unzipped it, then checked the file AjaxControlToolkit.Binary.NET40.zip, which had the AjaxMin.dll file in it. I had admin move the file to C:\Program Files\Microsoft Visual Studio 10.0\VB\Bin (I don't know if that directory matters, it works for me), then in VS added the DLL as a reference to the project. The few errors I've gotten since are nothing to do with ajaxmin.
I had the same problem, I had to copy the file AjaxMin.dll from where I extracted the AjaxControlToolkit.Binary.NET40.zip, to my project's bin folder. i.e. C:\Users\MyUserName\Documents\Visual Studio 2010\Projects\MyProject\MyProject\bin
Rebuilt the solution and this time worked fine..
Hope that will help you :)

Obfuscation in Ext Js 4.2 with Sencha CMD 3

I just installed all the required tools for the new Sencha Cmd(Ruby, Compass, Ext Js 4.2 SDK) everything works fine, but I don't know how to obtain the unique obfuscated file from the .js sources in my Ext Js application.
Any help, please? Thanks in advance.
I tried the "sencha app build" command from all the folders in my application path, always get the "Please ensure this command was executed from a valid application directory. Unable to locate 'app.dir' config property from 'sencha.cfg'
After more reading about the subject I think before the "sencha app build" command to work I need to generate the bootstrap.js file manually because my application wasn't generated using the framework, but I'm stuck here also. Anyone ever did that? Please?
The best way to get things work if your have legacy project (when project structure is not generated by sencha cmd tool) is to generate empty project and the move all necessary files/folders in to your existing project and try to adjust all configurations. You will need to move:
.sencha folder
folder with extjs development classes
bootstrap.js, bootsrap.css, build.xml
modify you start page correspondingly (index.html, index.jsp, or whatever)
create application.js to start your application
bootstrap files are always generated automatically. To generate it normally you have to use sencha app refresh command.
Basically the most important changes have to be made in .sencha folder. Most of the config files in this folder have a lot of comments so this is not a problem to understand what to change. Also it's good idea to refer official doc page: Sencha CMD