jrieken
commented
4 years ago You have only described what you have done but nothing about actual/expected behaviour?
Closed rohan-paul closed 4 years ago
jrieken
commented
4 years ago You have only described what you have done but nothing about actual/expected behaviour?
rohan-paul
commented
4 years ago So the expected behaviour is as follows
After including the below configuration in, ~/.config/Code/User/snippets/javascriptreact.json
"react-classnames": {
"prefix": "clmi",
"body": [
"className={classes.}"
],
"description": "react-classname"
}So now, in my actual React app in a .js component file when I type 'clmi' the autocompletion should bring up the corresponding snippet option, which is
"className={classes.}"
Actual Behaviour
I type 'clmi' in a .js React app component file, that snippet option does not come at all. Instead whatever word (function / variable name ) that matches 'clmi' in the same .js file comes up in the autocompletion option.
jrieken
commented
4 years ago What does the language indicator at the lower right read when your cursor is at the insert position? Does this work when using F1 > Insert Snippet?
rohan-paul
commented
4 years ago And just today noticed another strange behaviour, (I hope, I am not missing something super basic here )
So, in a React component .js file when I type the snippet ('clmi' in this case) - before the React Component File's return() statement, I get the expected behaviour. But if I type the snippet ('clmi') inside the return() statement, I dont get anything. i.e. the snippet does not give me the code completion option inside the return () statment.
So in the below simplest example of a React Component file when I type my snippet outside of the return() part of the code, I get the expected behaviour , but typing my snippet inside the return() part it fails ( i.e. does not give any auto completion option inside return () part ).
import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
class App extends Component {
render() {
return (
<div className="App"
>
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<p>
Edit <code>src/App.js</code> and save to reload.
</p>
<a
className="App-link"
href="https://reactjs.org"
target="_blank"
rel="noopener noreferrer"
>
Learn React
</a>
</header>
</div>
);
}
}
export default App;Please try the tokens inspector via "F1 > Inspect TM Scopes" and position the cursor at those insert position. That will tell you the detected, embedded language. Depending on your grammar it might be a different language
rohan-paul
commented
4 years ago Ok, did that and bleow is what I am getting
jrieken
commented
4 years ago Looks the that's not JavaScript nor JavaScript React but the jsx-attr language. Try to target that with our snippet
rohan-paul
commented
4 years ago Wow. Thanks so much @jrieken . Finally it got resolved.
I put the whole snippet in the jsx-attr type target file ~/.config/Code/User/snippets/jsx-attr.json
Steps to Reproduce:
Then from the doropdown list of options, choosing “JavaScript React” for my React files and ‘Babel JavaScript’ for regular JS files.
3> Now included the below for my "react-classnames" snippet in vscode file ~/.config/Code/User/snippets/javascriptreact.json
Does this issue occur when all extensions are disabled?: Yes/No
NO, the issue does NOT occurs when running VSCode with all extensions disabled
And here's my list of extension ( Got it by running
$ code --list-extensions)Further, while trying to isolate the source - I disabled the ONLY the below four snippet related third party extensions (while keeping the rest of the extensions enabled )
But the issue still persists (i.e. with above 4 extensions disabled ). I also completely purged and did a fresh installation of VS Code in my machine and the issue continued as it is.