I init my first vscode extension following this page.
Here is my steps:
npm install -g yo generator-code
yo code
And here is the package.json generated:
{
"name": "helloworld",
"displayName": "helloworld",
"description": "description helloworld",
"version": "0.0.1",
"engines": {
"vscode": "^1.72.0"
},
"categories": [
"Other"
],
"activationEvents": [
"onCommand:helloworld.helloWorld"
],
"main": "./out/extension.js",
"contributes": {
"commands": [
{
"command": "helloworld.helloWorld",
"title": "Hello World"
}
]
},
"scripts": {
"vscode:prepublish": "npm run compile",
"compile": "tsc -p ./",
"watch": "tsc -watch -p ./",
"pretest": "npm run compile && npm run lint",
"lint": "eslint src --ext ts",
"test": "node ./out/test/runTest.js"
},
"devDependencies": {
"#types/glob": "^8.0.0",
"#types/mocha": "^10.0.0",
"#types/node": "16.x",
"#types/vscode": "^1.72.0",
"#typescript-eslint/eslint-plugin": "^5.38.1",
"#typescript-eslint/parser": "^5.38.1",
"#vscode/test-electron": "^2.1.5",
"eslint": "^8.24.0",
"glob": "^8.0.3",
"mocha": "^10.0.0",
"typescript": "^4.8.4"
}
}
When I press H5 to debug, I got no command matched here:
I was stuck here for a while, where is my command??
I've encountered this just now as well. Make sure that engines.vscode in package.json matches the version of vscode you are running:
"engines": {
"vscode": "^1.73.0"
},
I guess the generator will use the latest version available, but you might not have upgraded yet. That was the case for me.
#tacospice pointed out exactly. in package.json, engines.vscode determines minimum version of VSCode. In my case, yo created extension template which set minimum VSCode version(1.74.0) newer than working VSCode(1.70.0). Check Help -> About -> version with package.json.
Related
I was looking for developing my own theia plugin. First, I want to try the simple "Hello World" plugin with the command yo #theia/plugin.
Yeoman command to generate Theia plugin
I develop with Ubuntu 20.04. I get many TypeScript errors as we can see in the following image.
Errors with yeoman commands
I tried to figure out by myself. I installed many tsc versions, but nothing worked. I've readed the Prerequisites first and installed every dependencies.
I understand that the TypeScript version may not be the good one, but not sure which one and why.
Here are some versions I use:
yarn: 1.22.19
node: v16.14.2
tsc: 3.1.3
Here is the tsconfig file that was autogenetared with yo command:
{
"compilerOptions": {
"strict": true,
"experimentalDecorators": true,
"noUnusedLocals": true,
"emitDecoratorMetadata": true,
"downlevelIteration": true,
"module": "commonjs",
"moduleResolution": "node",
"target": "es6",
"lib": [
"es6",
"webworker"
],
"sourceMap": true,
"rootDir": "src",
"outDir": "lib",
"skipLibCheck": true
},
"include": [
"src"
]
}
Here is the package.json:
{
"name": "hello",
"publisher": "theia",
"keywords": [
"theia-plugin"
],
"version": "0.0.1",
"license": "none",
"files": [
"src"
],
"activationEvents": [
"*"
],
"devDependencies": {
"#theia/plugin": "next",
"#theia/plugin-packager": "latest",
"rimraf": "2.6.2",
"typescript-formatter": "7.2.2",
"typescript": "3.5.3"
},
"scripts": {
"prepare": "yarn run clean && yarn run build",
"clean": "rimraf lib",
"format-code": "tsfmt -r",
"watch": "tsc -watch",
"compile": "tsc",
"build": "yarn run format-code && yarn run compile && theia-plugin pack"
},
"engines": {
"theiaPlugin": "next"
},
"theiaPlugin": {
"backend": "lib/hello-backend.js"
}
}
I changed nothing from the yo command
I am a little lost as why it happens. Can everyone help me out?
I was expecting the yo and yarn commands to be successful.
I installed a fresh install of CRA and also installed eslint and prettier and as well as two packages to make them work smoothly with each other.
Eslint is working and active but prettier is not formatting. I get the following error in the terminal:
Error: Failed to load plugin 'react' declared in 'CLIOptions': The argument 'filename' must be a file URL object, file URL string, or absolute path string. Received ''
Package.json:
{
"name": "test-app",
"version": "0.1.0",
"private": true,
"dependencies": {
"#testing-library/jest-dom": "^5.16.4",
"#testing-library/react": "^13.3.0",
"#testing-library/user-event": "^13.5.0",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-scripts": "5.0.1",
"web-vitals": "^2.1.4"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest",
"prettier"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"eslint": "^8.20.0",
"eslint-config-prettier": "^8.5.0",
"eslint-plugin-react": "^7.30.1",
"prettier": "^2.7.1"
}
}
i have developed a task pane word addin with yo and js
the thing is when i built it i have html files and manifest.xml file but i don't know how to install these files inside word (windows)
i used this command from package.json:
npm run build
my package.json
{
"name": "office-addin-taskpane-js",
"version": "0.0.1",
"repository": {
"type": "git",
"url": "https://github.com/OfficeDev/Office-Addin-TaskPane-JS.git"
},
"license": "MIT",
"config": {
"app_to_debug": "word",
"app_type_to_debug": "desktop",
"dev_server_port": 3000
},
"scripts": {
"build": "webpack --mode production",
"build:dev": "webpack --mode development",
"dev-server": "webpack serve --mode development",
"lint": "office-addin-lint check",
"lint:fix": "office-addin-lint fix",
"prettier": "office-addin-lint prettier",
"start": "office-addin-debugging start manifest.xml",
"start:desktop": "office-addin-debugging start manifest.xml desktop",
"start:web": "office-addin-debugging start manifest.xml web",
"stop": "office-addin-debugging stop manifest.xml",
"validate": "office-addin-manifest validate manifest.xml",
"watch": "webpack --mode development --watch"
},
"dependencies": {
"core-js": "^3.9.1",
"regenerator-runtime": "^0.13.7"
},
"devDependencies": {
"#babel/core": "^7.13.10",
"#babel/preset-env": "^7.12.11",
"#babel/preset-typescript": "^7.13.0",
"#types/office-js": "^1.0.180",
"#types/office-runtime": "^1.0.17",
"acorn": "^8.5.0",
"babel-loader": "^8.2.2",
"copy-webpack-plugin": "^9.0.1",
"eslint-plugin-office-addins": "^2.0.0",
"file-loader": "^6.2.0",
"html-loader": "^2.1.2",
"html-webpack-plugin": "^5.3.2",
"office-addin-cli": "^1.3.5",
"office-addin-debugging": "^4.3.8",
"office-addin-dev-certs": "^1.7.7",
"office-addin-lint": "^2.0.0",
"office-addin-manifest": "^1.7.7",
"office-addin-prettier-config": "^1.1.4",
"os-browserify": "^0.3.0",
"process": "^0.11.10",
"source-map-loader": "^3.0.0",
"ts-loader": "^9.2.5",
"typescript": "^4.3.5",
"webpack": "^5.50.0",
"webpack-cli": "^4.8.0",
"webpack-dev-server": "4.7.3"
},
"prettier": "office-addin-prettier-config",
"browserslist": [
"ie 11"
]
}
can anyone help me build it the right way then install it?
thanks
First of all, you need to run the dev server. The scripts section lists available commands you could use for that:
"dev-server": "webpack serve --mode development",
So, you could use the following command line:
npm run dev-server
Then you can launch the host application, the scripts section defines the following entries for that:
"start": "office-addin-debugging start manifest.xml",
"start:desktop": "office-addin-debugging start manifest.xml desktop",
"start:web": "office-addin-debugging start manifest.xml web",
Depending on your choice (whether it is a desktop application or browser) you could choose one to run. For example:
npm run start:desktop
In that case the desktop edition of Excel will be run and the add-in sideloaded.
You can read more about that in the Overview of debugging Office Add-ins article.
I created a vscode extension app and it works perfectly for some versions of vscode and not for others. So far, I've noticed this issue only in mac, but doesn't mean the same issue might happen for other versions of windows. In mac, when I try my extension app on version 1.40.2 it doesn't seem to work. There is no option to run my app in command palette or context menu. It's missing. But if I try it on version 1.55.2 (Universal) then the extension app appears and runs successfully in context menu and command palette no problem.
When I run it on my mac on version 1.40.2, I get the dialog message Extension is not compatible with Code 1.40.2. Extension requires: ^1.55.0.
Another error I've seen is in the console it come up with this error, which I created a new project by running yo code in that problem vscode version and hit F5 on a fresh template and I still got this error so not sure if it's related or not.
Error: Invalid problemMatcher reference: $ts-webpack-watch
Error: Invalid problemMatcher reference: $tslint-webpack-watch
I've also seen this error too
Why am I having a version compatibility issue? I don't think it's something in my extension.ts file because if I remove all my code ie
'use strict';
import * as vscode from 'vscode';
const ncp = require("copy-paste");
const os = require('os');
let folderOutput: string;
let fileOutput: vscode.Uri;
export function activate(context: vscode.ExtensionContext) {
let disposable = vscode.commands.registerCommand('my-app.startApp', async (uri: vscode.Uri) => {
});
context.subscriptions.push(disposable);
}
then the issue is still there so that eliminates that file from being the issue. I appreciate any help!
Package.json
{
"name": "my-app",
"displayName": "my app",
"description": "does something interesting",
"version": "0.0.1",
"engines": {
"vscode": "^1.55.0"
},
"categories": [
"Other"
],
"activationEvents": [
"onCommand:my-app.startApp"
],
"main": "./dist/extension.js",
"contributes": {
"commands": [
{
"command": "my-app.startApp",
"title": "Start My App"
}
],
"menus": {
"editor/context": [
{
"command": "my-app.startApp"
}
]
}
},
"scripts": {
"vscode:prepublish": "npm run package",
"compile": "webpack",
"watch": "webpack --watch",
"package": "webpack --mode production --devtool hidden-source-map",
"test-compile": "tsc -p ./",
"test-watch": "tsc -watch -p ./",
"pretest": "npm run test-compile && npm run lint",
"lint": "eslint src --ext ts",
"test": "node ./out/test/runTest.js"
},
"devDependencies": {
"#types/vscode": "^1.55.0",
"#types/glob": "^7.1.3",
"#types/mocha": "^8.0.4",
"#types/node": "^12.11.7",
"eslint": "^7.19.0",
"#typescript-eslint/eslint-plugin": "^4.14.1",
"#typescript-eslint/parser": "^4.14.1",
"glob": "^7.1.6",
"mocha": "^8.2.1",
"typescript": "^4.1.3",
"vscode-test": "^1.5.0",
"ts-loader": "^8.0.14",
"webpack": "^5.19.0",
"webpack-cli": "^4.4.0"
},
"dependencies": {
"copy-paste": "^1.3.0",
"simple-git": "^2.38.0"
}
}
I have code reading .env using dotenv that is working in dev but after transcompiling with Babel the values from process.env are undefined. I created a sample program to illustrate the problem which is below.
If I'm in projectRoot and run
npm run start-w
then
console.log(process.env.VAR1)
prints the value 'var1Val'
However, if I do
npm run build
cd dist
node index.js
the value of VAR1 is 'undefined'.
index.js
import 'dotenv/config'
console.log('VAR1', process.env.VAR1)
.env
VAR1=var1val
VAR2=var2val
VAR3=var3val
.babelrc
{
"presets": ["#babel/preset-env"],
"plugins": [
"#babel/plugin-transform-runtime",
]
}
package.json
{
"name": "dotenv.node-babel",
"version": "1.0.0",
"description": "",
"main": "index.js",
"dependencies": {
"#babel/runtime": "^7.4.3",
"dotenv": "^7.0.0"
},
"devDependencies": {
"#babel/cli": "^7.4.3",
"#babel/core": "^7.4.3",
"#babel/node": "^7.2.2",
"#babel/plugin-transform-runtime": "^7.4.3",
"#babel/preset-env": "^7.4.3",
"#types/dotenv": "^6.1.1",
"nodemon": "^1.18.11",
"rimraf": "^2.6.3"
},
"scripts": {
"clean-dist": "rimraf dist",
"build": "npm run-script clean-dist && babel . -d dist --ignore node_modules",
"start": "babel-node index.js",
"start-w": "NODE_ENV=devLocal nodemon --exec babel-node index.js"
},
"author": "",
"license": "ISC"
}
If you do not have a .env file in your build directory, try creating one. I guess that's why the environment variable is undefined.