Why Can't I Enable Tab Completion For JSX With Emmet In Atom IDE - autocomplete

I'm referring to the instructions at https://gist.github.com/ivan-hilckov/a487b21b325441cdbe8c56594a685ec0 But, they're not working for me.
My package.json file is:
{
"name": "atom-ide-setup",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"react": "^16.6.0",
"react-dom": "^16.6.0"
},
"devDependencies": {
"babel-core": "^6.26.3",
"babel-preset-env": "^1.7.0",
"babel-preset-react": "^6.24.1"
}
}
Atom has the following Community Packages installed:
emmet
language-babel
language-javascript-jsx (disabled)
atom-ternjs (disabled)
javascript-snippets
My keymap.cson file includes:
'atom-text-editor[data-grammar~="jsx"]:not([mini])':
'tab': 'emmet:expand-abbreviation-with-tab'
And the .js file I'm editing looks like:
import React, { Component } from 'react';
class App extends Component {
constructor(props) {
super(props);
}
render() {
return (
div.myclass // this doesn't tab expand
)
}
}
export default App;
I suspect I'm missing something, or something is turned off. But I don't know what. Any help is appreciated.

Thanks to comments from mikedklein and swelet on another related post. As of Emmet 2.4.3 command+shift+e works, or adding:
'atom-text-editor:not([mini])':'tab':
'emmet:expand-abbreviation-with-tab'
to the keymap.cson file found at Atom -> Keymap... in the menu. Yes, including the single quotes.

I had the same issue using emmet with Atom. What worked for me (on windows) is Ctrl + e

Related

Sanity Deployment on Vercel Issue: Cannot find module 'sanity' even though package is installed

So i'm trying to deploy sanity/nextjs on vercel. It runs fine locally but for the production build I keep getting the same error.
Here's the main error:
> build
> next build
info - Linting and checking validity of types...
Failed to compile.
./sanity/sanity.config.ts:1:28
Type error: Cannot find module 'sanity' or its corresponding type declarations.
> 1 | import {defineConfig} from 'sanity'
| ^
2 | import {deskTool} from 'sanity/desk'
3 | import {visionTool} from '#sanity/vision'
4 | import {schemaTypes} from './schemas'
Error: Command "npm run build" exited with 1
My sanity package.json:
{
"name": "nft-drop",
"private": true,
"version": "1.0.0",
"main": "package.json",
"license": "UNLICENSED",
"scripts": {
"dev": "sanity dev",
"start": "sanity start",
"build": "sanity build",
"deploy": "sanity deploy",
"deploy-graphql": "sanity graphql deploy"
},
"keywords": [
"sanity"
],
"dependencies": {
"#sanity/vision": "^3.0.0",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-is": "^18.2.0",
"sanity": "^3.0.0",
"styled-components": "^5.2.0"
},
"devDependencies": {
"#sanity/cli": "^3.2.3",
"#sanity/eslint-config-studio": "^2.0.1",
"eslint": "^8.6.0",
"prettier": "^2.8.3",
"typescript": "^4.0.0"
},
"prettier": {
"semi": false,
"printWidth": 100,
"bracketSpacing": false,
"singleQuote": true
}
}
My main folder package.json:
{
"private": true,
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start"
},
"dependencies": {
"#next/font": "^13.1.2",
"#sanity/image-url": "^1.0.1",
"#thirdweb-dev/react": "^3.6.9",
"#thirdweb-dev/sdk": "^3.6.9",
"ethers": "^5.7.2",
"next": "latest",
"next-sanity": "^4.0.6",
"react": "18.2.0",
"react-dom": "18.2.0"
},
"devDependencies": {
"#sanity/cli": "^3.2.3",
"#types/node": "18.11.3",
"#types/react": "18.0.21",
"#types/react-dom": "18.0.6",
"autoprefixer": "^10.4.12",
"postcss": "^8.4.18",
"tailwindcss": "^3.2.4",
"typescript": "4.9.4"
}
}
Thanks for your help.
I've checked that I have the 'sanity' package installed. I've added the recommended 'vercel.json' file and I also have the #sanity/cli installed. I've checked my local env setup to make sure that was also on vercel.
Maybe i've overinstalled the sanity packages in trying to solve it?
This is my first time using sanity, nextjs, and vercel so I've run out of ideas and haven't found the same issue answered elsewhere yet.
I had this issue as well, and it seems to be related to Sanity v3 which only came out a month ago - I rolled back to sanity v2 and it fixed the deployment issue
You can try to add .vercelignore in the root file and add sanity in there to ignore the whole folder
The fix is to move your sanity client config file (aka wherever you have your .env variables setup - in my case: sanity.ts) into a lib folder in the root directory. If the file itself is in the root directory, it will not build.
Updating the import statement from
import {defineConfig} from 'sanity'
to
import {defineConfig} from 'sanity/lib/exports'
worked for me.

VS Code custom folding provider works once then breaks upon file edit

UPDATE:
The breaking of the custom code folding extension appears to be due to it conflicting with the VSCode C# extension. If the C# extension is disabled the custom folding works as expected, but breaks when the C# extension is enabled. I assume I'll have to check on the C# extension forums for any way to work around this issue if there is one.
I am trying to write a VS Code extension for CSharp, that provides custom code folding.
I want it to have the ability to fold/hide any lines of code that are just a '{' or '}' character aside from whitespace. The code I have below works on performing this when a file is first opened, but if you then make any edits to the file the custom folding breaks and seems to partially revert back to CSharp's default folding.
I am wondering what code/config setting I am missing to make it use this custom FoldingRangeProvider even after a file is edited and not just the first time a file is opened.
At the bottom is a link to a repo I made with this extension code. The repo readme has notes on running the extension.
My extensions.ts code is this
import * as vscode from 'vscode';
export function deactivate() { }
export function activate(context: vscode.ExtensionContext) {
vscode.languages.registerFoldingRangeProvider({ scheme: 'file', language: 'csharp' }, new MyFoldingRangeProvider());
}
class MyFoldingRangeProvider implements vscode.FoldingRangeProvider {
provideFoldingRanges(document: vscode.TextDocument, context: vscode.FoldingContext, token: vscode.CancellationToken): vscode.FoldingRange[] {
let ranges: vscode.FoldingRange[] = [];
for (let i = 0; i < document.lineCount; i++) {
const line = document.lineAt(i).text.trim();
if (line === "{" || line === "}") {
ranges.push(new vscode.FoldingRange(i - 1, i, vscode.FoldingRangeKind.Comment));
}
}
return ranges;
}
}
And my package.json code is this
{
"name": "bracefolding",
"displayName": "BraceFolding",
"description": "",
"version": "0.0.1",
"engines": {
"vscode": "^1.54.0"
},
"categories": [
"Other"
],
"activationEvents": [
"onLanguage:csharp"
],
"main": "./out/extension.js",
"contributes": {
"languages": [
{
"id": "csharp",
"extensions": [
".cs",
"cs"
],
"aliases": [
"CSharp",
"cs"
],
"configuration": "./language-configuration.json"
}
]
},
"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/vscode": "^1.54.0",
"#types/glob": "^7.2.0",
"#types/mocha": "^9.1.1",
"#types/node": "16.x",
"#typescript-eslint/eslint-plugin": "^5.30.0",
"#typescript-eslint/parser": "^5.30.0",
"eslint": "^8.18.0",
"glob": "^8.0.3",
"mocha": "^10.0.0",
"typescript": "^4.7.4",
"#vscode/test-electron": "^2.1.5"
}
}
The desired behavior is to change a CS code file from looking like this
namespace HelloWorld
{
class Hello
{
static void Main(string[] args)
{
System.Console.WriteLine("Hello World!! ");
if ("a" == "b")
{
Console.WriteLine("def");
}
}
}
}
To looking like this after the folding is done. In the code I marked this folding range kind as 'Comment', so on windows the keyboard shortcut to perform this folding is 'Ctrl-K' then 'Ctrl-/'
namespace HelloWorld
class Hello
static void Main(string[] args)
System.Console.WriteLine("Hello World!! ");
if ("a" == "b")
Console.WriteLine("def");
https://github.com/ethanwork/vscode_bracefolding

Can't run vscode extension app in certain vscode versions

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"
}
}

Material-UI theming does not apply with yarn pnp (berry)

Spent lots of time on this issue but I can't find a different reason.
When using yarn (v1) with Plug and Play or yarn v2. (berry) I can't get
Material-UI theming v 4.4.3 working.
Here's the example below. There is no problem when using a standard non pnp yarn configuration.
(create-react-app)
import React from "react";
import logo from "./logo.svg";
import "./App.css";
import { createMuiTheme } from "#material-ui/core/styles";
import { ThemeProvider } from "#material-ui/styles";
import Button from "#material-ui/core/Button";
const theme = createMuiTheme({
props: {
MuiButton: { variant: "outlined" }
}
});
function App() {
return (
<ThemeProvider theme={theme}>
<div>
<Button>text</Button>
</div>
</ThemeProvider>
);
}
export default App;
my package.json
{
"name": "test",
"version": "0.1.0",
"private": true,
"dependencies": {
"#material-ui/core": "^4.4.3",
"#material-ui/styles": "^4.4.3",
"#material-ui/system": "^4.4.3",
"react": "^16.10.1",
"react-dom": "^16.10.1",
"react-scripts": "3.1.2"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}
The theme is ignored.
Looks like it's a double initiation of #material-ui/styles problem. Guys from #material-ui team seem to be fixing this at the moment.
importing MuiThemeProvider as ThemeProvider from #material-ui/core/styles instead of importing ThemeProvider from #material-ui/styles fixed the issue.
I also ommited #material-ui/styles in my package.json
Hope this helps someone ...

How to Invoke WebView Extension from File Type

I am creating a VS Code WebView extension that I wish to invoke/trigger when I open a file of a specific file extension name. e.g. MyFile.abc.
Within myExt I added the onFileSystem to the activationEvents within package.json:
{
"name": "myext",
"description": "A Webview API Sample",
"version": "0.0.2",
"publisher": "vscode-myext",
"engines": {
"vscode": "^1.25.0"
},
"categories": [
"Other"
],
"activationEvents": [
"onWebviewPanel:myExt",
"onFileSystem:abc",
"*"
],
"main": "./out/extension.js",
"contributes": {
"commands": [
{
"command": "myExt.start",
"title": "Start myExt ",
"category": "My Ext"
}
]
},
"scripts": {
"vscode:prepublish": "tsc -p ./",
"compile": "tsc -p ./",
"watch": "tsc -w -p ./",
"postinstall": "node ./node_modules/vscode/bin/install"
},
"dependencies": {
"supports-color": "^6.0.0",
"vscode": "^1.1.18"
},
"devDependencies": {
"#types/node": "^10.5.2",
"tslint": "^5.11.0",
"typescript": "^2.9.2"
}
}
When I add "onFileSystem:abc" to activationEvents in myExt I was expecting my webview extension to open anytime I opened a file with the extension .abc however nothing happened.
I then tried the activationEvents setting "*", expecting that my webview extension would open at the start of VSCode but that too did not open my extension.
I am able to open and run my extension through Ctrl+Shift+P as per normal.
I don't think there's any activation event that fires when a file with a specific name or extension is opened. The onFileSystem event you were trying has a different purpose and checks for the scheme of a file.
Normally you would use onLanguage for this, and use the language identifier that your .abc extension is associated with. If it's not a popular file extension, you might need to register it in the contributes.languages section.
I then tried the activationEvents setting "*", expecting that my webview extension would open at the start of VSCode but that too did not open my extension.
The activate() method of your extension should always be called if the activation event is *. I assume by "running it with the command palette" you mean debugging the extension through the extension development host? Unless your extension is in your <User>/.vscode/extensions directory, it wouldn't be included in regular VSCode executions. It should then also be listed in the Extensions panel.
I think that you need to use
"workspaceContains:*.abc" as activationEvents
I think you have to do something for below in package.json
{
"activationEvents": [
"onCommand:"**HERE WILL BE YOUR EXTENSION NAME WHICH YOU REGISTERED**"
],
"contributes": {
"menus": {
"explorer/context": [
{
"when": "resourceLangId == **abc**", // this is the extension of the file where you want to execute your command
"command": "**YOUR COMMAND NAME**",
"title": "Anything relevent title",
"group": "navigation"
}
]
}
}
}
According to custom-editor-sample example by Microsoft, you need to do the following configuration in package.json:
"contributes": {
"customEditors": [
{
"viewType": "catCustoms.catScratch",
"displayName": "Cat Scratch",
"selector": [
{
"filenamePattern": "*.cscratch"
}
]
},