vue - custom blocks - syntax highlighting - javascript

Vue single file components enable to create custom blocks (apart from the well-known script, template and style). Official docs: https://vue-loader.vuejs.org/guide/custom-blocks.html#example But is there a way to get syntax highligting to work inside such a custom block? I tried inserting JS code as well as other lang types but there is no syntax highlighting.

Vetur supports syntax highlighting in a custom block:
Vetur provides a setting vetur.grammar.customBlocks that defaults to:
"vetur.grammar.customBlocks": {
"docs": "md",
"i18n": "json"
}
You can
Change vetur.grammar.customBlocks, for example:
"vetur.grammar.customBlocks": {
"docs": "md",
"i18n": "json",
"page-query": "graphql",
"static-query": "graphql"
}
Run the command Vetur: Generate grammar from vetur.grammar.customBlocks (via the Command Palette)
Restart VS Code to get syntax highlighting for custom > blocks.
Valid language value for custom blocks:
All lang values in the support table.
md | yaml | json | php | graphql

Related

What lint configuration to use to eliminate the warning : Invalid JSDoc tag name

I am using eslint to set up my node js project but I keep getting the following warnings:
Now in my .eslint.json I am unable to find a rule/technique to help ignore these new tags and types. I have looked in the following documentation:
https://eslint.org/docs/rules/
I assume that you are also using https://github.com/gajus/eslint-plugin-jsdoc
If so then you have to add this rule to your eslint config file:
"jsdoc/check-tag-names": ["error", { "definedTags": ["consumes", "produces", "route"] }],
and whatever custom tags you also have in your docs...

How to resolve TS compilation error when DataTables options and TypeDefinitions are used?

I have created a minimal TypeScript project set up in Visual Studio.
I use the jQuery plugin DataTables. I added TypeDefinitions for jQuery and DataTables via the NuGet package manager. Everything works fine. The definitions work in general, because I am able to use IntelliSense auto completion for jQuery and DataTable functions.
But I get compiler errors as soon as I add a options object for table configuration to the DataTables constructor.
window.onload = () => {
$(document).ready(function() {
var table = $('#example').DataTable({
"paging": false
});
});
};
The first error is:
Severity Code Description Project File Line Suppression State
Error Build:Argument of type '{ "paging": false; }' is not assignable to parameter of type 'Settings'. TS_DT_withoutErrors TS_DT_withoutErrors C:\project_path...\TS_DT_withoutErrors\app.ts 3
The second error is:
Severity Code Description Project File Line Suppression State
Error TS2345 (TS) Argument of type '{ "paging": false; }' is not assignable to parameter of type 'Settings'.
Property 'oFeatures' is missing in type '{ "paging": false; }'. TS_DT_withoutErrors C:\project_path...\TS_DT_withoutErrors\app.ts
I can add a "oFeatures": null, property to the object, but that just changes the second error message to:
Property 'oScroll' is missing in type '{ "oFeatures": null; "paging": false; }'.
I could go on and add every property the compiler demands next, but after 50+ lines I see no end in sight.
I guess the Definition file is somewhat deprecated and demands properties that are no longer a thing in DataTables or it wants internal properties that aren't meant to be altered by a user of the library, because the properties are not even mentioned in the official documentation.
I know that I could configure the the build settings of the TypeScript compiler in a way that errors are ignored and the bundled and compiled js file is still emitted, but thats not really a solution for me.
So if anyone could tell me how and where I could contribute and alter the DataTables Definitions or how I could tell the compiler to ignore these two specific errors, that would be great.
My used packages are the following:
<packages>
<package id="jQuery" version="2.1.0" targetFramework="net45" />
<package id="jquery.dataTables.TypeScript.DefinitelyTyped" version="0.6.7" targetFramework="net452" />
<package id="jquery.TypeScript.DefinitelyTyped" version="3.1.2" targetFramework="net452" />
</packages>
Easy solution (TL;DR use type any)
I realised there is a simple solution or rather workaround for this kind of type error. Just use type any for the settings object.
var settingsObj: any = {
"paging": false
}
var table = $('#example').DataTable(settingsObj);
The DataTables constructor expects an argument of type DataTables.Settings. When using type any for the settings object the typescript compiler doesn't throw an error about a wrong argument type anymore.
Better approach
It would probably be better to study the contents of the DataTables typedefiniton file and change the DataTables.Settings class to resemble the methods of the official DataTables documentation. But just using type any works fine as well.
var settingsObj: DataTables.Settings = {
"paging": false
//several properties would be expected here
//or should be removed from DT TypeDefinition file
}

Emmet JS snippets in VS Code

Has anyone ever succeeded in getting Emmet JS snippets to work in VS Code or even in Sublime?
The solution from https://stackoverflow.com/a/16943996/2012407 did not work for me.
These are my settings:
"emmet.includeLanguages": {
"javascript": "javascriptreact",
"vue-html": "html",
"plaintext": "html"
},
This is my snippets.json:
{
"javascript": {
"abbreviations": {
"cl": "console.log",
"va": "var"
},
"snippets": {
"cl": "console.log",
"va": "var"
}
},
"css": {
"snippets": {
"cb": "color: black",
"bsd": "border: 1px solid ${1:red}"
}
}
}
There's no problem with CSS, SCSS, HTML, and all the rest - only JS. I've tried abbreviations or snippets, but the Emmet expansion puts HTML tags around what I write: cl becomes <cl> in Javascript & javascriptreact files.
I also tried js and javascriptreact in the snippets definition for the language with no luck.
No need to add JS snippets in Emmet: the new concept of Emmet 2.0 (already available in VS Code; v2.0 in beta and not publicly released yet) works as autocomplete provider so you can simply use native VS Code snippets instead
So I will put an example here for the built-in VS Code snippets, which are still not my favorite.
Open the command prompt with cmd+shift+p and type user snippets. There is already an example in there. Uncomment it, save, and you can use it straight away by typing the prefix.
I had to create the same snippet file named javascriptreact.json as well for it to work in most of my JS files - Javascript React (babel)
Ex:
{
"Test": {
"prefix": "ts",
"body": [
"console.log('test')",
"$1"
],
"description": "Prints test"
}
}
Now I have Emmet mapped to ctrl+e and having the built-in snippets limited to the intellisense is not great. I'd like a key binding like ctrl+e, and I am a big fan of Emmet.
I am still keen on having it working with Emmet using the same key binding if anyone knows.
This article solve issue in my case
https://medium.com/#eshwaren/enable-emmet-support-for-jsx-in-visual-studio-code-react-f1f5dfe8809c

How to use different syntax for same file extension on Sublime Text? (JS/JSX)

With Sublime Text, is it possible to use different syntax for a same file extension depending on the currently opened project ?
Example :
Project A : file.js contains classic Javascript
Project B : file.js contains JSX
How can I obtain JavaScript syntax for project A and Babel syntax for Project B?
Just for background (which you likely already know), Sublime Text applies a syntax via the extension of the file, and overriding that requires you to use View > Syntax > Open all with current extension as... from the menu. This creates a syntax specific override which appears in a specific file name and is thus not directly overrideable on a per project basis.
That said, it is possible to swap the syntax on your own (e.g. via the command palette) which opens the possibility of a plugin being able to do this for you. There may be an existing plugin that does this in PackageControl, but for reference purposes, here is an example based on something I'm using for a similar purpose.
The following assumes that you're using the Babel plugin to get your syntax highlighting, since you mention Babel. This would need to be modified if this is not the package you're using. This could also be modified to similarly do a swap for a different type of file if desired.
To use this, select Tools > Developer > New Plugin from the menu and replace the entire contents of the sample file with the code below, and then save it as a python file in the directory that Sublime suggests (which should be in Packages\User). I named mine js_syntax_swap.py, but the name doesn't matter as long as the extension is .py:
import sublime, sublime_plugin
# Standard Sublime JavaScript syntax file is:
# 'Packages/JavaScript/JavaScript.sublime-syntax'
#
# The Babel package syntax is:
# 'Packages/Babel/JavaScript (Babel).sublime-syntax'
class JavaScriptSyntaxSwap (sublime_plugin.EventListener):
def modify_syntax (self, view):
if view.window () == None:
return
swapSyntax = view.settings ().get ('using_babel_js', False)
curSyntax = view.settings ().get ('syntax')
variables = view.window ().extract_variables ()
extension = variables['file_extension']
if swapSyntax is True and extension == 'js' and "Babel" not in curSyntax:
view.set_syntax_file ('Packages/Babel/JavaScript (Babel).sublime-syntax')
def on_load (self, view):
self.modify_syntax (view)
def on_post_save (self, view):
self.modify_syntax (view)
With this in place, if you choose Project > Edit Project from the menu, you can include a using_babel_js setting to enable the plugin for JavaScript files in that project. An example might be:
{
"folders":
[
{
"path": "."
}
],
"settings":
{
"using_babel_js": true
}
}
What this is doing is checking every time you load or save a file to see if it should swap the syntax from the default to the Babel JSX syntax, which it does only for files with the extension .js that are not already using Babel as the syntax.

Why does JSHint throw a warning if I am using const?

This is the error I get when using const:
<error line="2" column="1" severity="warning" message="&apos;const&apos; is available in ES6 (use esnext option) or Mozilla JS extensions (use moz)." source="jshint.W104" />
My code looks like this:
const Suites = {
Spade: 1,
Heart: 2,
Diamond: 3,
Club: 4
};
The code works fine only JSHint is warning me every time.
When relying upon ECMAScript 6 features such as const, you should set this option so JSHint doesn't raise unnecessary warnings.
/*jshint esnext: true */ (Edit 2015.12.29: updated syntax to reflect #Olga's comments)
/*jshint esversion: 6 */
const Suites = {
Spade: 1,
Heart: 2,
Diamond: 3,
Club: 4
};
This option, as the name suggests, tells JSHint that your code uses ECMAScript 6 specific syntax.
http://jshint.com/docs/options/#esversion
Edit 2017.06.11: added another option based on this answer.
While inline configuration works well for an individual file, you can also enable this setting for the entire project by creating a .jshintrc file in your project's root and adding it there.
{
"esversion": 6
}
You can add a file named .jshintrc in your app's root with the following content to apply this setting for the whole solution:
{
"esversion": 6
}
James' answer suggests that you can add a comment /*jshint esversion: 6 */ for each file, but it is more work than necessary if you need to control many files.
I got this same warning when using an export statement. I'm using VS Code and used a similar approach to Wenlong Jiang's solution.
User Settings
JSHint config
"jshint.config": {} (Edit)
Use double quotes when specifying "esversion"
Or copy this snippet into User Settings:
"jshint.options": {
"esversion": 6,
}
Creating a .jshintrc file isn't necessary if you want to configure the global jshint settings for your editor
If you're using VSCode:
1.
Go to preferences -> settings (cmd + ,)
Type jshint.options into the search bar
Hover over it and click on the pencil icon
Its now appended on the right side.
Add "esversion": 6 to the options object.
2.
Or simply add this to your user settings:
"jshint.options": {
"esversion": 6
}
[UPDATE] new vscode settings
Go to preferences -> settings (cmd + ,)
type jshint into search
continue with step 2.
I spent ages trying to fix this. Every solution talks about 'setting options'. I don't know what that means. Finally, I figured it out. You can just include a commented out line at the top of the file /*jshint esversion: 6 */.
You can specify esversion:6 inside jshint options object. Please see the image. I am using grunt-contrib-jshint plugin.
Create .jshintrc file in the root dir and add there the latest js version: "esversion": 9 and asi version: "asi": true (it will help you to avoid using semicolons)
{
"esversion": 9,
"asi": true
}
When you start using ECMAScript 6 this error thrown by your IDE.
There are two options available:
if you have only one file and want to use the es6 then simply add below line at the top of the file.
/*jshint esversion: 6 */
Or if you have number of js file or you are using any framework(like nodejs express)you can create a new file named .jshintrc in your root directory and add code below in the file:
{
"esversion": 6
}
If you want to use the es6 version onward for each project you can configure your IDE.
In your package.json you can tell Jshint to use es6 like this
"jshintConfig":{
"esversion": 6
}
Creating a .jshintrc file is not necessary.
If you are using ECMAScript 6 then all you need to do is tell JSHint that:
Go to File > Settings
Navigate to Languages & Frameworks > JavaScript > Code Quality Tools > JSHint.
Scroll down to find Warn about incompatibilities with the specified ECMAScript version.
Click on Set.
Enter 6 and then press [Set].
Click [OK]
For SublimeText 3 on Mac:
Create a .jshintrc file in your root directory (or wherever you prefer) and specify the esversion:
# .jshintrc
{
"esversion": 6
}
Reference the pwd of the file you just created in SublimeLinter user settings
(Sublime Text > Preference > Package Settings > SublimeLinter > Settings)
// SublimeLinter Settings - User
{
"linters": {
"jshint": {
"args": ["--config", "/Users/[your_username]/.jshintrc"]
}
}
}
Quit and relaunch SublimeText
If you are using Webstorm and if you don't have your own config file, then just enable EcmaScript.next in Relaxing options in in
Settings | Languages & Frameworks | JavaScript | Code Quality Tools |
JSHint
See this question How-do-I-resolve-these-JSHint-ES6-errors
If you are using Grunt configuration, You need to do the following steps
Warning message in Jshint:
Solution:
Set the jshint options and map the .jshintrc.js file
Create the .jshintrc.js file in that file add the following code
{
"esversion": 6
}
After configured this, Run again It will skip the warning,
Create a file called, say jshint_opts with this content:
{
"esversion": 6
}
Then invoke jshint with something like this command line:
jshint --config jshint_opts lib/*.js
May 2020 Here's a simple solution i found and it will resolve for all of my projects ,on windows if your project is somewhere inside c: directory , create new file .jshintrc and save it in C directory open this .jshintrc file and write { "esversion": 6} and that's it. the warnings should go away , same will work in d directory
yes you can also enable this setting for the specific project only by same creating a .jshintrc file in your project's root and adding { "esversion": 6}
To fix this in Dreamweaver CC 2018, I went to
preferences,
edit rule set - select JS,
edit/apply changes,
find "esnext" and changed the false setting to true.
It worked for me after hours of research. Hope it helps others.
I had the same issue, and I found that by adding:
/* jshint esversion: 8 */
(or whatever jshint esversion you need, like 6)
To the top of my .js file satisfies the cause for the warnings.
If using Sublime Text 3:
Go to Preferences -> Settings
Under Preferences.sublime-settings—User add "esversion": 6
In a new version of Dreamweaver to solve this error
Go to Edit->Preference->Linting
And the go-to js Edit rule set
and past
"jshintConfig":{
"esversion": 6
}

Categories