I have problem with formatting html file by prettier end eslint. Prettier formatting by html code by adding /> to single tag, but I don't want using slash character for end my tag. And second problem is adding indent for "head" and "body" tag in "html" tag, I want Use indent only in "body" and "head" tag.
Second problem is conflict with prettier and eslint in my JS code. ESlint return problem because I seting indent for 4 spaces, but prettier want using only two spaces intent.
Prettier return code like this
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
</head>
<body></body>
</html>
But I want have something like this
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
</body>
</html>
My pacpage.json prettier and eslint dependencies
"eslint": "^6.1.0",
"eslint-config-airbnb": "^18.0.1",
"eslint-config-prettier": "^6.2.0",
"eslint-plugin-import": "^2.18.2",
"eslint-plugin-jsx-a11y": "^6.2.3",
"eslint-plugin-prettier": "^3.1.0",
"eslint-plugin-react": "^7.14.3",
"eslint-plugin-react-hooks": "^1.7.0",
"prettier": "^1.18.2",
.eslintrc.json
{
"extends": ["airbnb", "prettier"],
"plugins": ["prettier"],
"rules": {
"prettier/prettier": ["error"],
"indent": [
"error",
4,
{ "VariableDeclarator": { "var": 2, "let": 2, "const": 3 } }
]
}
}
.prettierrc
{
"singleQuote": true,
}
Thanks for your help.
Related
I'm working on a .NET and Angular webapp, with ngx-sharebuttons ShareButtonModule. When I want to get a link of the post or share it via WhatsApp, the meta tags are not being updated properly. I am setting up default meta tags in index.html:
index.html
<html lang="pl">
<head>
<meta charset="utf-8">
<title>DDM - Daily Dose Of Memes</title>
<base href="/">
<meta name="description" content="Memy na miarę Twoich możliwości. Ty też możesz dać z siebie 30%! Zbiór obrazków, gifów i filmików dla sympatyków czarnego humoru.">
<!-- <meta name="keywords" content="Memy, hard, obrazki, filmiki, czarny humor"> -->
<meta name="keywords" content>
<meta name="url" content="https://ddmemes.com.pl">
<meta name="title" content="DDM - Daily Dose Of Memes">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<link rel="shortcut icon" href="./assets/favicon.ico">
<!-- og meta tags for link share -->
<meta property="og:title" content="DDM - Daily Dose Of Memes"/>
<meta property="og:url" content="https://ddmemes.com.pl"/>
<meta property="og:image" content="https://res.cloudinary.com/duj1ftjtp/image/upload/v1659954431/LogoImage.png"/>
<meta property="og:description" content="Memy na miarę Twoich możliwości. Ty też możesz dać z siebie 30%! Zbiór obrazków, gifów i filmików dla sympatyków czarnego humoru.">
<link rel="manifest" href="manifest.webmanifest">
<meta name="theme-color" content="#000000">
</head>
<body>
<app-root></app-root>
<noscript>Please enable JavaScript to continue using this application.</noscript>
</body>
</html>
Later, when the user wants to share a post's component, it appears that the meta attributes are not being updated properly. First, I am setting the data via share-buttons modal:
meme-card.component.html
<share-buttons theme="modern-dark"
[include]="['copy', 'facebook', 'messenger', 'reddit', 'telegram', 'twitter', 'whatsapp']"
[showIcon]="true"
[showText]="true"
[autoSetMeta]="false"
image="{{meme?.url}}"
url="https://ddmemes.com.pl/meme/{{meme.id}}/{{convertText(meme.title)}}"
description="{{meme?.title}}"
title="{{meme?.title}}"
class="pt-3">
</share-buttons>
Also, I am updating the meta tags themselves in ngOnInit via below code:
meme-card.component.ts
changeMetaTags() {
this.meta?.updateTag(
{ property: 'og:title', content: this.meme?.title },
);
this.meta?.addTag(
{ name: 'title', content: this.meme?.title}
);
this.meta?.updateTag(
{ name: 'description', content: this.meme?.title },
);
this.meta?.updateTag(
{ property: 'og:image', content: this.meme?.url },
);
}
Although everything appears to be updated properly upon inspecting a page, when I send the link to somebody or upon checking in https://www.heymeta.com/, it appears that the data still remains default, equal to the one given in index.html. The only thing that seems to be updated is url.
Is there something I'm missing here? I'd appreciate any help.
Cheers
I would like to change the basic hmtl structure in VS code that is loaded with [! + tab] or [ctrl + space]
What I have when I press [! tab]:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>
What I would like to set it to for example :
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel='stylesheet' type='text/css' media='screen' href='main.css'>
<title>Document</title>
</head>
<body>
</body>
</html>
I tried looking into the html snippets parameters but didn't find anything.
To overwrite existing emmets in VS Code:
Create a snippets.json file, add this JSON structure and save it somewhere on your hard disk.
{
"html": {
"snippets": {
"!": "{<!DOCTYPE html>}+html[lang='fr']>(head>meta:utf+meta:vp+title{${2:Document}}+link[rel='stylesheet' type='text/css' media='screen' href='main.css'])+body"
}
},
"css": {
"snippets": {}
}
}
Open the VS Code settings (Code → Preferences → Settings) and search for “Emmet Extensions Path”.
Click “Add Item”, enter the path to the folder where you’ve saved the snippets.json file you’ve created earlier, and press “OK”.
Now try ! + TAB ;)
To learn more about how custom snippets work, check this article
I pretty new on these things and im trying to improve my self on html skeleton. So when I call html skeleton on vscode it's being like this as you know.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>
but i want to change default html skeleton content as like this;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body{background-color: black;}
</style>
</head>
<body>
</body>
</html>
Someone can help me with this?
You can make your own custom snippet using vscode.
As in your case you can create one using the following steps:
Open the gear icon on the bottom left of you vscode.
Select user snippet
Type html
Adding your custom html skelton
You can now add this code to have your custom skelton:
"boilerplate": {
"prefix": "log",
body: [
"<!DOCTYPE html>",
"<html lang=\"en\">",
"<head>",
" <meta charset=\"UTF-8\">",
" <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">",
" <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">",
" <title>Document</title>",
" <style>",
" body{background-color: black;}",
" </style>",
"</head>",
"<body>",
" ",
"</body>",
"</html>",
],
"description": ""
}
],
"description": "Log output to console"
}
}
I haven't changed the prefix, but it can be changed through "prefix": ""
Using the custom snippet
To use the custom snippet, just type the prefix in the html file to get the results!
If you want to add you own custom code, and have problem in converting it into snippet, here's a website which will help in that:
snippet generator
For more knowledge this video can help: YouTube video
I cannot find a solid example of using the language tag with Next Head. Here are the two best I've seen. Which one, if either, is proper?
Note: It doesnt have to be dynamic.
Option 1
<Head>
<meta property="og:locale" content="en_US" />
...
</Head>
Option 2
<html lang='en'>
<Head>
...
</Head>
</html>
Option 3 (capital Html)
<Html lang='en'>
<Head>
...
</Head>
</Html>
You can add it to the next.config.js
module.exports = {
i18n: {
locales: ['en-US'],
defaultLocale: 'en-US',
localeDetection: false,
},
}
There is only one static page for which SEO should be done. I see a title here but not sure how can I add a description as well?
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Site Title</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
<app-root></app-root>
</body>
</html>
On the index.html you can set <meta name="description" content=""> in the <head> section of the page.
Import Meta: import { Meta } from '#angular/platform-browser';
In the component where you would like to change the description you can inject Meta:
constructor(private meta: Meta) { }
And update the value:
this.meta.updateTag({ name: 'description', content: 'Your new description' });
Check the docs about the meta service:
https://angular.io/api/platform-browser/Meta
Start by importing the Meta and Title services:
import { Component } from '#angular/core';
import { Title, Meta } from '#angular/platform-browser';
Inject services into component constructor:
constructor(private titleService: Title, private metaService: Meta) {}
add OnInit method and rebuild your app:
ngOnInit() {
this.titleService.setTitle(this.title);
this.metaService.addTags([
{name: 'keywords', content: 'Angular, Universal, Example'},
{name: 'description', content: 'Angular Universal Example'},
{name: 'robots', content: 'index, follow'}
]);
}
see this link to learn more about meta:
Getting & Setting HTML Meta Tags in Angular
The easiest way would be to add it in HTML directly.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Site Title</title>
<base href="/">
<meta
name="description"
content=" YOUR DESCPRITION "
/>
<link rel="manifest" href="manifest.webapp" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
<app-root></app-root>
</body>
</html>
You can add a manifest file and support it for further enhancement.
Use these type to update meta description ("description", "my description")