How to show hints and define dictionary with ui-codemirror?
$scope.cmOption = {
lineWrapping : true,
lineNumbers: true,
textWrapping: true,
indentWithTabs: true,
readOnly: false,
mode: "javascript",
matchBrackets: true,
autoCloseBrackets: true,
gutters: ["CodeMirror-lint-markers"],
lint: true,
showHint: true
};
I tried with ng-codemirror-dictionary-hint but it gives me an error
instance.showHint is not a function
Related
I am using typescript and in *.tsx files, especially when i am copying code around, it quite often adds an additional
import React from "react";
// ? On Save
"editor.codeActionsOnSave": {
"source.addMissingImports": true,
"source.fixAll.eslint": true
// "source.organizeImports": true
}
I am using this configuration and works fine.
extensions.json
{
"recommendations": [
"amatiasq.sort-imports",
"dbaeumer.vscode-eslint",
"eamodio.gitlens",
"eg2.vscode-npm-script",
"esbenp.prettier-vscode",
"github.copilot",
"github.vscode-pull-request-github",
"ibm.output-colorizer",
"mhutchie.git-graph",
"ms-azuretools.vscode-docker",
"ms-kubernetes-tools.vscode-kubernetes-tools",
"ms-playwright.playwright",
"ms-vscode-remote.vscode-remote-extensionpack",
"pkief.material-icon-theme",
"quicktype.quicktype",
"redhat.vscode-yaml",
"ryanluker.vscode-coverage-gutters",
"streetsidesoftware.code-spell-checker",
"stylelint.vscode-stylelint",
"tyriar.sort-lines"
]
}
settings.json
{
"[javascript]": {
"editor.formatOnSave": false
},
"[javascriptreact]": {
"editor.formatOnSave": false
},
"[jsonc]": {
"editor.defaultFormatter": "vscode.json-language-features"
},
"[typescript]": {
"editor.formatOnSave": false
},
"[typescriptreact]": {
"editor.formatOnSave": false
},
"diffEditor.ignoreTrimWhitespace": false,
"editor.bracketPairColorization.enabled": true,
"editor.codeActionsOnSave": {
"source.addMissingImports": true,
"source.fixAll": false,
"source.fixAll.eslint": true,
"source.organizeImports": false
},
"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.formatOnPaste": false,
"editor.formatOnSave": true,
"editor.guides.bracketPairs": "active",
"editor.inlineSuggest.enabled": true,
"editor.suggestSelection": "first",
"editor.tabSize": 2,
"eslint.alwaysShowStatus": true,
"eslint.format.enable": true,
"eslint.probe": [
"html",
"javascript",
"javascriptreact",
"markdown",
"typescript",
"typescriptreact"
],
"files.watcherExclude": {
"**/*.pem": true,
"**/*.tsbuildinfo": true,
"**/.DS_Store": true,
"**/.env.development.local": true,
"**/.env.local": true,
"**/.env.production.local": true,
"**/.env.test.local": true,
"**/.next/**": true,
"**/.pnp.js": true,
"**/.pnp/**": true,
"**/.vercel": true,
"**/build/**": true,
"**/coverage/**": true,
"**/node_modules/**": true,
"**/npm-debug.log*": true,
"**/out/**": true,
"**/yarn-debug.log*": true,
"**/yarn-error.log*": true
},
"github.copilot.enable": {
"*": true,
"markdown": false,
"plaintext": true,
"yaml": true
},
"redhat.telemetry.enabled": true,
"sort-imports.ignore-type-defs": false,
"stylelint.validate": [
"css",
"scss"
],
"terminal.integrated.sendKeybindingsToShell": true,
"window.zoomLevel": 1,
"workbench.iconTheme": "material-icon-theme"
}
I'm trying to highlight all %()% substrings in the htmlmixed mode. The matching RegExp is ([%(](.*)[)%]).
Here's the code i'm using for CodeMirror:
const code = CodeMirror.fromTextArea(document.querySelector("#id"), {
theme: "dracula",
mode: "text/html",
lineNumbers: true,
firstLineNumber: 1,
spellcheck: false,
autocorrect: true,
extraKeys: { "Ctrl-Space": "autocomplete" },
styleActiveLine: true,
highlightSelectionMatches: { showToken: /\w/, annotateScrollbar: true }
});
Thanks
You have to add a style property in highlightSelectionMatches.
const code = CodeMirror.fromTextArea(document.querySelector("#id"), {
theme: "dracula",
mode: "text/html",
lineNumbers: true,
firstLineNumber: 1,
spellcheck: false,
autocorrect: true,
extraKeys: { "Ctrl-Space": "autocomplete" },
styleActiveLine: true,
highlightSelectionMatches: {
minChars: 2,
showToken: /\w/,
style:'matchhighlight',
annotateScrollbar: true
}
});
Add below in css:
.cm-matchhighlight {
background: red !important
}
I have launched a website but I can't figure out why the carousels don't load up correctly each time the site is visited and it sometimes requires reloading it multiple times - The images have all been downsized for web and I don't know how to fix it,
http://alexburger.co/Graphic.html
https://codepen.io/glittergirl/pen/pZwaaQ
$(window).load(function() {
"use strict";
$('.main-carousel').flickity({
cellAlign: 'left',
contain: true,
wrapAround: true,
imagesLoaded: true,
autoPlay: true,
bgLazyLoad: 1
// adaptiveHeight: true
});
$('.main-carousel2').flickity({
cellAlign: 'left',
contain: true,
wrapAround: true,
imagesLoaded: true,
autoPlay: true,
bgLazyLoad: 1
// adaptiveHeight: true
});
});
I would like my JSHint to yell at me when I don't follow Crockford's function conventions - i.e.:
"There should be no space between the name of a function and the ( (left parenthesis) of its parameter list. There should be one space between the ) (right parenthesis) and the { (left curly brace) that begins the statement body"
Is there an option to enable this? I thought "white":true would work but it doesn't seem to. I know JSLint will complain about this as well.
My .jshintrc:
{
"white": true,
"node": true,
"browser": true,
"esnext": true,
"bitwise": true,
"camelcase": true,
"curly": true,
"eqeqeq": true,
"immed": true,
"indent": 2,
"latedef": true,
"newcap": true,
"noarg": true,
"quotmark": "single",
"regexp": true,
"undef": true,
"nomen": false,
"unused": true,
"strict": true,
"trailing": true,
"smarttabs": true,
"sub": true,
"globals": {
"angular": false,
"d3": false
}
}
I think that this may be something best done with jscs. In fact there are presets for Crockford available.
As JSHint moves to version 3, it will no longer be focused on being a style tool. (Read JSHint 3 Plans).
I have a question about my slideshow, i want it to play automatically, how to do it???
i've already changed the autoplay setting from false to true, but still cant.
here is my code:
<script>
jQuery(document).ready(function($) {
$('#full-width-slider').royalSlider({
arrowsNav: true,
loop: true,
keyboardNavEnabled: true,
controlsInside: false,
imageScaleMode: 'fill',
arrowsNavAutoHide: false,
autoScaleSlider: true,
autoScaleSliderWidth: 960,
autoScaleSliderHeight: 350,
controlNavigation: 'bullets',
thumbsFitInViewport: false,
navigateByClick: true,
startSlideId: 0,
autoPlay: true,
transitionType:'move',
globalCaption: true
});
});
</script>
and here is my link if you need to read the jquery file
My Slider problem link
THANKS
Try this,
autoPlay: {
enabled: true,
delay: 1500
}
Change the delay according to your requirement.
Or just try,
autoPlay : {
enabled : true
}
AutoPlay property requires an object not true\flase value, look at doc
Try this code:
<script>
jQuery(document).ready(function($) {
$('#full-width-slider').royalSlider({
arrowsNav: true,
loop: true,
keyboardNavEnabled: true,
controlsInside: false,
imageScaleMode: 'fill',
arrowsNavAutoHide: false,
autoScaleSlider: true,
autoScaleSliderWidth: 960,
autoScaleSliderHeight: 350,
controlNavigation: 'bullets',
thumbsFitInViewport: false,
navigateByClick: true,
startSlideId: 0,
autoPlay: {
// autoplay options go gere
enabled: true,
pauseOnHover: true
}
});
});
Edit: "}" was missing after " pauseOnHover: true" .