I'm using Brackets for development applications on the Node.JS. As I know Brackets relies on the TernJS library. When I add the root of the project file named .tern-project with the following lines, I do not see any change in the autocomplete.
{
"libs": [],
"plugins": {
"node": {}
}
}
After that I still see hints for browser, JQuery hints, AngularJS hints, etc. How can I configure TernJS for project(directory) in Brackets?
I've found the ternific plugin to work pretty well for per project tern configuration.
Related
I'm looking for a Stylelint (and/or ESLint) plugin/rule that has a rule for avoiding the usage of obsolete CSS properties like grid-row-gap.
I'd like to believe someone already made this, but I couldn't find anything like it via Google, GitHub, or npm.
A plugin that also does the same for [warning] when using experimental properties/selectors would also be welcomed (e.g. :focus-visible).
Recently I started to develop a collection of rules in this plugin.
npm install #isnotdefined/stylelint-plugin
Refer the plugins and rules inside your .stylelintrc file:
{
"plugins":
[
"#isnotdefined/stylelint-plugin"
],
"rules":
{
"#isnotdefined/no-obsolete": true
}
}
At this point I need assistence to find more obsolete properties and values. Just in case someone knows a public list - let me know.
I get this warning when opening a fresh-new NativeScript (Angular) in VS code.
The below 1 extension(s) in workspace recommendations have issues: telerik.nativescript (not found in marketplace)
Should I ignore the warning or delete telerik.nativescript in the extension.json while I develop the app?
I have also been getting this notification wondering what it was after creating a new NativeScript Angular project. It seems like NativeScript is trying to recommend their NativeScript extension in VSCode https://nativescript.org/nativescript-for-visual-studio-code/.
I don't have this recommendation or extensions.json file on my older projects so I'm sure you can delete the file/recommendations and decide for yourself if you want to install their extension without affecting your project.
{
"recommendations": []
}
I think that this extension was probably renamed from "telerik.nativescript" to "NativeScript.nativescript" because in my case:
I was having the same problem described above "not found in marketplace"
I had an (old) nativescript extension already installed on my system (probably installed a year ago)
The VSCODE was kind of confused... checking the installed extensions was pointing me to the new one, but at the same time was telling me that it was not installed!?
Solution:
VSCODE: Extensions: NativeScript => [Unistall] followed by a [Install]
Source Code: "recommendations" changed "telerik.nativescript" to "NativeScript.nativescript"
Now everything seems to be in order.
Just to add some more detail, the file that needs to be changed in your NativeScript projects is ".vscode\extensions.json"
The code needs to be changed from:
{
"recommendations": [
"telerik.nativescript"
]
}
To:
{
"recommendations": [
"NativeScript.nativescript"
]
}
#antseq is correct that the extension was renamed from "telerik.nativescript" to "NativeScript.nativescript".
I want to use the css linter "stylelint" on my VScode text editor.
I downloaded the plugin and install it, then I make the "css.validate": false. But i don't have any box that show me error on my CSS files. What can I do ?
If you're getting started with stylelint for the first time, there are two key steps to enable it in Visual Studio Code:
turn off Visual Studio Code's built-in CSS linter and turn on the stylelint extension
create a stylelint configuration object and turn on some rules
You can complete the first step by following the extension usage instructions, mainly changing your Visual Studio Code settings to:
{
"stylelint.enable": true,
"css.validate": false,
"scss.validate": false
}
And the second step by following the configuration documentation on the stylelint website. I believe the quickest means to get started is:
install the recommended config into your project using npm:
npm install --save-dev stylelint-config-recommended
Create a .stylelintrc file that extends the recommended config in the root of your project:
{ "extends": "stylelint-config-recommended" }
This config turns on just the possible error rules. It is a sensible config to start with and build upon. There are over 150 rules built-in to stylelint. You can choose to turn on and configure as many, or as few, as you like to meet your linting needs.
For anyone seeing this and trying to lint other file extensions; note that by default, the extension validates only CSS and PostCSS files.
In order to validate file extensions such as SCSS, you would need to explicitly state so in .vscode\settings.json:
{
"css.validate": false,
"less.validate": false,
"scss.validate": false,
"stylelint.enable": true,
"stylelint.validate": ["css", "scss"]
}
I’m working on a GraphQL extension for Visual Studio Code that implements syntax highlighting and auto-completion for GraphQL schemas and queries. It currently works on files ending with the .gql extension. However, a common GraphQL usage is to define inline queries inside JavaScript/TypeScript files, for instance:
#connect(gql`user(id: 2) { name, email }`)
function MyUIComponent({ user }) { ... }
How could I support the highlighting and suggestion (autocompletion) features that my extension implements in ES6 (named) tagged template literal strings?
As linked in the comments under the question post, this is related to this github issue: Extension providing language support in ES6 template strings #5961, which was resolved by this comment by one of the maintainers, Matt Bierner:
VS Code Extensions can now bundle ts server plugins. This allows extension authors to write a vscode extension that adds syntax highlighting + intellisense for template strings.
Two extensions are already making use of this: [...]
I did a quick google of graphql ts server plugin and found this: https://www.npmjs.com/package/ts-graphql-plugin.
Quoting from its readme's "getting started" section:
First, confirm that your project has TypeScript and graphql(v15.x.0 or later).
To install this plugin, execute the following:
npm install ts-graphql-plugin -D
And configure plugins section in your tsconfig.json, for example:
{
"compilerOptions": {
"module": "commonjs",
"target": "es5",
"plugins": [
{
"name": "ts-graphql-plugin",
"schema": "path-or-url-to-your-schema.graphql",
"tag": "gql"
}
]
}
}
It's ready to go. Launch your TypeScript IDE.
So to answer your question of "How could I support the highlighting and autocompletion features that my extension implements in ES6 (named) template string?", either you don't need to (just tell your users to include that TypeScript Server plugin), or you can find some way to integrate that into your plugin.
You could also try to take inspiration from the approach used by the Template Literal Editor extension.
Quoting from its readme:
Open ES6 template literals and other configurable multi-line strings or heredocs in any language in a synced editor, with language support (HTML, CSS, SQL, shell, markdown etc).
Instructions: [...]
Other related tools:
This won't add suggestions, but for syntax highlighting in tagged template literal strings, there is the comment-tagged-templates extension by Matt Bierner.
I am getting the linting error in my code 'import' is only available in ES6 (use 'esversion: 6').
Everything es6 related is throwing an error. Not sure what I have to configure to get it to work.
Add a file named .jshintrc to your project and inside this file type this:
{
"esversion": 6
}
As you can see it here:
The full documentation of jshint options are found here: http://jshint.com/docs/options
Edit: I've added a way to enable es6 if you use ESLint instead of JSHint as well as updating the screenshots since VSCode has changed since my original answer.
JSHint Method:
If you are using JSHint, you can add the following to your settings:
"jshint.options":{
"esversion":6
}
ESLint Method:
If you are using ESLint, you can add the following to your settings:
"eslint.options": {
"env":{
"es6":true
},
"parserOptions": {
"ecmaVersion": 6 // or 7,8,9
}
}
ESLint Configuration Documentation
How to update the settings
Neither JSHint or ESLint are enabled in a fresh version of VS Code, so you'll need to install the extension(s) by going to extensions and then searching for your preferred linter.
In VS Code, head to settings
When the settings display you'll see the settings sections:
Note that there are two sections where you can customize your settings, User Settings and Workspace Settings
User Settings Is where you should apply any global settings you will want for any project you will ever work on.
Workspace Settings Is where you can make settings changes that should only be applied to your current project.
In my case, since I know that only some of my projects can use ES6, I need to have the error hinting to warn me if I'm using ES6 my non-ES6 projects...so I set this only to my Workspace Settings
But, if you know that anything you code in VS Code is going to be an ES6, project, then save a step, and add it to your user settings.
Click on either User/Workspace depending on your preference. Search for JSHint or ESLint (whichever you use). Click on any of the Edit in settings.json links, it doesn't matter which one.
Add the pertinent settings depending on whether you use JSHint or ESLint:
JSHint
ESLint
You can add "esversion": 6 to "jshint.options" in the user settings.
{
"jshint.options": {
"esversion": 6
}
}
Just to round out the excellent suggestions already submitted, you can also set this on a file by file basis by added this escaped line (and similar for other jshint settings) to the top of your file.
// jshint esversion:6
Actually you can add it anywhere, but it only effects subsequent code, allowing you to flip settings on and off if you're desperate to do something weird.
Add the next hint before your code:
/* jshint esversion: 6 */
Example
Make sure, you do the above configurations with the json but also remove/disable the jshint extension for workspace if you're using eslint and vice versa.,
Disable your jshint extension like this: