Can you please tell me how to remove below message on VS code editor?
The attribute name of [ *ngIf ] must be in lowercase.
Above message shows on below code
<div *ngIf="isBornOn">
</div>
I think it has to do with the vscode-htmlhint plugin, try disable it.
If that removed the warning you can disable just that rule by setting attr-lowercase to false.
Read more about the configuration of this plugin here
In VSCode you can set the following settings to disable it.:
"htmlhint.options": {
"attr-lowercase": false
}
If don't want lose warning when use attributes that don't follow lower case rule. Instead of, you can define an attribute white list:
"htmlhint.options": {
"attr-lowercase": [
"*ngIf",
"ngIf",
"*ngFor",
"ngFor",
"ngSwitch",
"ngModel"
],
"doctype-first": false
},
Also can add doctype-first to avoid that message on every component.
Anyone looking to solve this from another IDE such as Eclipse or Codemix, simply create a file called .htmlhintrc place this in /<angular-project>/src/.htmlhintrc
and change the values as you see fit, mine are:
{
"tagname-lowercase": false,
"attr-lowercase": false,
"attr-value-double-quotes": true,
"doctype-first": false,
"tag-pair": true,
"spec-char-escape": true,
"id-unique": true,
"src-not-empty": true,
"attr-no-duplication": true,
"title-require": true
}
Re-open the tab if not automatically resolved or then restart the IDE.
Under VS Code - Extensions (left sidebar - box-shaped icon) - Disable this plugin or uninstall if required.
Then Reboot
Related
I have a Vue project. When I go into my VS Code settings, I see an extension called "Vetur". I believe Vetur is what takes care of all code formatting for me. Under settings, when I click into Vetur, it gives me a list of different formatters for JS, CSS, HTML, etc. as they appear within Vue files. Here's a picture:
Picture of Vetur settings
The default formatter set for most things is something called prettier.
However, when I go into settings (which takes me to a file called settings.json), I don't see the word "prettier" there at all! Instead, I see a bunch of settings for other formatters that weren't selected (such as js-beautify-html), and the closest thing to the word "prettier" is the word "prettyhtml".
In the dropdown list for HTML, I do see an option for "prettyhtml", but it warns me that it's deprecated. Here's a screenshot: prettyhtml shown as a dropdown option but says it's deprecated.
When I go into this settings.json, I see this part:
"vetur.format.defaultFormatterOptions": {
"js-beautify-html": {
"wrap_attributes": "force-expand-multiline"
},
"prettyhtml": {
"printWidth": 100,
"singleQuote": false,
"wrapAttributes": false,
"sortAttributes": false
}
}
Is "prettyhtml" the same thing as "prettier"?
If not, then why doesn't anything appear in settings.json for "prettier"? There are exactly zero string matches for the word "prettier" in settings.json.
This is all very confusing! Thanks.
I don't want to enable all the times, it's sometimes annoying.
First disable the hover for all languages and then enable it for specific languages, in your settings.json like this:
"editor.hover.enabled": false,
"[scss]": {
"editor.hover.enabled": true
}
You can put multiple languages in the specific setting like:
"[scss, css]": {
"editor.hover.enabled": true
}
I started using react-native-animatable. It is similar to Animate.css with many pre-defined animations for React Native. Remembering all the different animation names is tricky, how do I set auto-complete in VSCode for the different animation names:
The project has a definition file. I am not working with Typescript but I guess auto-completion wouldn't mind, right? How do I set it up?
What I've tried so far:
I've added a file named tsconfig.json in the root:
{
"allowJs": true,
"compilerOptions": {
"noUnusedLocals": true,
"module": "commonjs",
"noImplicitAny": true,
"removeComments": true,
"preserveConstEnums": true,
"sourceMap": true
},
"files": ["typings/react-native-animatable.d"]
}
I have copied the 3rd party's definition to a directory named "typings".
Still no luck.
I'm pretty sure typings definition files end in .d.ts While I'm not sure what the exact problem or solution is this page - under the 'quick fix' heading may point you in the right direction.
I faced this issue in 16.11 react but by pasting three files in react folder in node_modules: which are index.d.ts and experimental.d.ts and global.d.ts. I got these from my old project which is 16.9 react.
I have configured the following TypeScript snippet in Visual Studio Code
"console.log": {
"prefix": "cl",
"body": [
"console.log();"
],
"description": "console.log()"
}
It doesn't work however, because there is already a snippet defined for the cl (class). How can I overwrite that snippet with mine? I'd like to use cl, because I have other IDEs configured the same way and would prefer not change my convention.
When you type cl a list of all the possible expansions of the cl snippet is shown and your snippet is probably around the bottom of the list. In order to access the snippet at the top of the list you can added the following to your settings.json
// Place your settings in this file to overwrite the default settings
{
"typescript.useCodeSnippetsOnMethodSuggest": true,
"editor.snippetSuggestions": "top",
"editor.tabCompletion": true
}
Here notice the editor.snippetSuggestions. This is the setting which defines the sorting of the autocomplete list which appears when you type your snippet's abbreviation. By default it is bottom which is why your snippet appears at the end of the list.
Can anyone tell me how to get TinyMCE to stop converting my URLs to relative links in Plone?
For example, if I enter this in the HTML source:
<img src="/images/dir/subdir/my_image.png" />
it will convert it to:
<img src="../../../my_image.png" />
I've edited tiny_mce.js (in portal_skins) to set:
convert_urls:false,
relative_urls:false,
but to no effect. I've read all similar posts here, but none really answer this question.
It's fine if it does the relative thing when users are picking images by browsing the filesystem (i.e. the catalog). I just want it to respect what I type in the html box ... so that I have the option of forcing an absolute path if I deem it appropriate. This is the standard behavior in kupu.
Any ideas?
Set convert_urls: false in tiny_mce_init.js, not tiny_mce.js. Early in tiny_mce_init.js you'll see a call to window.tinyMCE.init passing a bunch of initialisation options. In the Products.TinyMCE I'm looking at, the last option is fix_list_elements: false. Add your option there.
Edit: tiny_mce_init.js is no longer used in Products.TinyMCE 1.3.x (Plone 4.3). Instead, override the tinymce-jsonconfiguration browser view, e.g.:
Assuming you have a package with a browser layer, add in browser/configure.zcml:
<browser:page
for="*"
name="tinymce-jsonconfiguration"
class=".tinymce.TinyMCEBrowserView"
permission="zope2.View"
attribute="jsonConfiguration"
layer="..interfaces.IMyBrowserLayer"
/>
Then add browser/tinymce.py:
try:
import simplejson as json
except ImportError:
import json
from Acquisition import aq_inner
from Products.CMFCore.utils import getToolByName
from Products.TinyMCE.browser.browser import TinyMCEBrowserView as View
from Products.TinyMCE.browser.interfaces.browser import ITinyMCEBrowserView
from zope.interface import implements
class TinyMCEBrowserView(View):
implements(ITinyMCEBrowserView)
def jsonConfiguration(self, field):
"""Return the configuration in JSON"""
utility = getToolByName(aq_inner(self.context), 'portal_tinymce')
config = utility.getConfiguration(context=self.context,
field=field,
request=self.request)
config['convert_urls'] = False
return json.dumps(config)
You should add these configs into tinymce.init:
relative_urls: false,
convert_urls: false,
remove_script_host : false,
ref: https://www.tiny.cloud/docs/configure/url-handling/
An other solution is to configure TinyMCE with the control panel to use UID for every links and images, instead of path, so you don't modify any existing javascripts and don't have any relative url displayed.
In Plone 5 is possible disable TinyMCE absolute to relative URL adding variables in Advanced tab of TinyMCE Settings
Site setup > TinyMCE > Advaced
{"relative_urls": false, "convert_urls": false, "remove_script_host": false}
Further variables are available in Products/CMFPlone/static/components/tinymce-builded/js/tinymce/tinymce.js
...
popup_css: '',
plugins: '',
document_base_url: documentBaseUrl,
add_form_submit_trigger: true,
submit_patch: true,
add_unload_trigger: true,
convert_urls: true,
relative_urls: true,
remove_script_host: true,
object_resizing: true,
...