I have react code in .jsx file and html part doesn't get proper highlighting it just shows as white text. I'm using "Javascript React" mode in Visual Studio Code and Prettier extension but nothing helped to solve this issue.
{
"[cpp]": {
"editor.quickSuggestions": false
},
"[c]": {
"editor.quickSuggestions": false
},
"java.configuration.checkProjectSettingsExclusions": false,
"java.errors.incompleteClasspath.severity": "ignore",
"workbench.settings.editor": "json",
"workbench.colorCustomizations": {},
"[javascriptreact]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"editor.formatOnSave": true,
"editor.formatOnPaste": true,
"editor.formatOnType": true,
"editor.tabSize": 2,
"prettier.jsxBracketSameLine": true,
"editor.suggestSelection": "first",
"vsintellicode.modify.editor.suggestSelection": "automaticallyOverrodeDefaultValue",
"[javascript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"files.associations": {
"*.jsx": "javascriptreact",
"*.js": "javascriptreact"
},
"[jsonc]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"workbench.colorTheme": "Atom One Dark"
}
may be something wrong with my settings.json or should I add some property for html ?
I tried also different themes in VS Code same problem. This is how it looks like:
Related
I have installed tailwind CSS intelliSense
Why does the autofill work after "class" but not "className" is that normal? Do I just use "class" with react then? Seems to work.
Thanks for any suggestions
package.json has:
"tailwindCSS.includeLanguages": { "javascript": "javascript", "html": "HTML" }, "editor.quickSuggestions": { "strings": true }
tailwind.config.js file I tried:
content: ["./pages/**/*.{html,js}", "./components/**/*.{html,js}"],
and I tried from the website:
content: [ "./src/**/*.{js,jsx,ts,tsx}", ],
I've been using this plugin postcss-px-to-viewport-vite-plugin for years on Vuejs projects.
In summary it coverts all 'px' to 'vw' using Postcss. After runtime, on Chrome debug mode, you can see tha all 'px' are translated to 'vw' correctly. The only thing I must do to set the configuration up is install the Plugin and create postcsss config file.
I've been trying to set the same configuration on React, but no way!
After the app is up and running, I still see all px !
My postcss.config.js on vuejs project :
module.exports = {
plugins: [
{
"postcss-px-to-viewport": {
options: {
unitToConvert: "px",
viewportWidth: 1900,
unitPrecision: 5,
propList: ["*"],
viewportUnit: "vw",
fontViewportUnit: "vw",
selectorBlackList: [],
minPixelValue: 1,
mediaQuery: false,
replace: true,
exclude: undefined,
include: undefined,
landscape: false,
landscapeUnit: "vw",
landscapeWidth: 568,
},
},
},
],
};
Edit: Restarting react fixed the issue, the following code works as expected.
I am trying to enable the DebugView mode in Google analytics but events are not being shown or are logging in any way. I am using react-ga4: https://www.npmjs.com/package/react-ga4 and it says here you can enable debug by passing in the config: https://support.google.com/analytics/answer/7201382?hl=en#zippy=%2Cglobal-site-tag-websites
I believe the following code should enable the DebugView mode in the google analytics:
ReactGA.initialize([
{
trackingId: "G-TRACKINGID",
gaOptions: {
debug_mode: true,
},
gtagOptions: {
debug_mode: true,
},
},
]);
Then to trigger event I have the following code in an onClick handler:
ReactGA.event({
action: "action_button",
category: "category_button",
label: "label_button",
value: 44,
});
This worked for me :
ReactGA.initialize("G-TRACKINGID", {
gaOptions: {
debug_mode: true,
},
gtagOptions: {
debug_mode: true,
},
});
This workspace has two linting plugins(eslint and prettier):
My lint settings:
I can indeed see the default format document is set to prettier:
(The Problem) The format on save is still the following:
The format I'm expecting:
(line#8 has a total of 59 characters including whitespaces, which is under 120)
Note: on another project this is not an issue. But in that other project I also have linting files configured inside it.
I think your vscode config and settings and .prettier are not the same.
try creating .prettierrc file in your project root and add a prettier config. vscode will automatically pick up the config.
Add all the format-related config in .prettierrc vscode should read the config and format. settings.json is not the right place to add all the prettier config. It'll also be helpful for other team members otherwise when someone commits it'll change the format.
.prettier
{
"trailingComma": "es5",
"tabWidth": 4,
"semi": true,
"singleQuote": true,
"printWidth": 120,
"bracketSpacing": true,
"jsxBracketSameLine": true
}
.vscode/settings.json
{
"editor.formatOnSave": true,
"editor.defaultFormatter": "esbenp.prettier-vscode",
"[javascript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[jsonc]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[html]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[javascriptreact]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[typescriptreact]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
}
}
This seems to be an ESLint bug.
See https://github.com/prettier/prettier-vscode/issues/595#issuecomment-463762649.
Try disabling the ESLint extension and see if it works.
I am new to web development, and I have never seen tags closed by {" "}. Why is that?
I have a React project created with the Create React App: https://reactjs.org/docs/create-a-new-react-app.html#create-react-app
I have my project set up with ESLint, Prettier, and Flow using VSCode as my editor. I followed this when setting up my project: https://medium.com/js-imaginea/setup-eslint-prettier-and-flow-in-vscode-a3fd6a48b70a
Here are my VSCode Extensions:
Beautify
Editor Config for VS Code
ESLint
Flow Language Support
Prettier - Code formatter
Here is my .eslint.json:
{
"env": {
"browser": true,
"es6": true
},
"extends": [
"eslint:recommended",
"prettier",
"plugin:prettier/recommended"
],
"globals": {
"Atomics": "readonly",
"SharedArrayBuffer": "readonly"
},
"parserOptions": {
"ecmaFeatures": {
"jsx": true
},
"ecmaVersion": 2018,
"sourceType": "module"
},
"plugins": [
"react",
"prettier"
],
"rules": {
"prettier/prettier": "error",
"react/jsx-uses-react": 1,
"react/jsx-uses-vars": 1,
"react/react-in-jsx-scope": 1
}
}
Here is my VSCode Settings:
{
"editor.formatOnSave": true,
"javascript.updateImportsOnFileMove.enabled": "always",
"explorer.confirmDragAndDrop": false,
"explorer.confirmDelete": false,
"terminal.integrated.cursorStyle": "line",
"terminal.integrated.enableBell": true,
"dart.flutterCreateIOSLanguage": "swift",
"dart.flutterCreateAndroidLanguage": "kotlin",
"eslint.autoFixOnSave": true,
"editor.suggestSelection": "first",
"window.zoomLevel": 1,
"prettier.eslintIntegration": true,
"terminal.integrated.shell.osx": "/bin/bash",
"eslint.alwaysShowStatus": true,
"files.exclude": {
"**/.classpath": true,
"**/.project": true,
"**/.settings": true,
"**/.factorypath": true
},
"files.autoSave": "off",
"editor.tabSize": 2,
"editor.detectIndentation": false,
"prettier.jsxBracketSameLine": true,
"javascript.format.insertSpaceAfterOpeningAndBeforeClosingJsxExpressionBraces": true,
"prettier.jsxSingleQuote": true,
}
Normally, I thought elements were closed like so:
<h1>Hello World!</h1>
But, something happening with ESLint, Prettier, and/or Flow that's formatting it like this (on save):
<h1> Hello World! </h1>{" "}
I don't know what the
{" "}
is. It also adds spaces around the string inside. Is this the right way of formatting? If not, how do I go about removing it? Whenever I save my project, it adds that to the end of an element.
I think the issue is fixed,
"editor.formatOnSave": true,
and
"eslint.autoFixOnSave": true,
in my VS Code settings seemed to be conflicting. Changing my VS Code settings to the following:
"editor.formatOnSave": false,
"eslint.autoFixOnSave": true,
seems to fix the issue. Not sure why though.
It's because you are leaving trailing space at the end and eslint/priettier makes it more visible to let everyone know it is your real intention to place space there.
It might look unnecessary at first but there is real difference sometimes in HTML outcome.