We are using Visual Studio Code to develop a react native project using Tailwind CSS with this npm package: https://www.npmjs.com/package/twrnc. We had installed Prettier in our vscode and postcss, prettier, prettier-plugin-tailwindcss in our package.json's devDependencies section.
The auto complete function work fine but the auto sorting cannot work.
twrnc with style class Attribute not working
But when we switch the style keyword to class, it works.twrnc with class class Attribute work
We try to follow the config setting suggestion here: https://github.com/tailwindlabs/tailwindcss/issues/7553#issuecomment-735915659
Here is our VSCode setting json:
"editor.formatOnSave": true,
"tailwindCSS.classAttributes": ["class", "className", "ngClass", "style"],
"scss.validate": false,
"editor.quickSuggestions": {
"strings": true
},
"editor.autoClosingQuotes": "always",
"tailwindCSS.experimental.classRegex": [
"tw`([^`]*)", // tw`...`
"tw=\"([^\"]*)", // <div tw="..." />
"tw={\"([^\"}]*)", // <div tw={"..."} />
"tw\\.\\w+`([^`]*)", // tw.xxx`...`
"tw\\(.*?\\)`([^`]*)" // tw(Component)`...`
],
"tailwindCSS.includeLanguages": {
"typescript": "javascript",
"typescriptreact": "javascript"
}
Can anyone give me some suggesion on how to fix it? Many Thanks.
Related
I'm using Nuxt with Vuetify.
I created a class and assigned it some padding.
The class is defined in a unscoped <style> in layouts/default.vue.
when I'm on development mode (npm run dev) everything looks great as I aimed for.
the class is on container element so the final html looks like
<div class="container container--fluid my-class">
the devtools look like that when I'm on dev mode:
so my-class is applied. But once I build the project (npm run generate) my-class is overridden by the container class rules:
I guess it is happening because of the order in which the classes combined into a single css but not sure it behaves differently for dev and built projects.
How can I fix it?
After some more digging it seems to be a known issue with nuxt.
It happens when declaring styles in non-scoped style tag, and using it somewhere else.
I followed these steps: https://stackoverflow.com/a/60925793/9103301
which is basically integrating Vuetify into nuxt manually and not with #nuxt/vuetify.
then I could control over the order the css is loaded in nuxt.config.js - first vuetify and then my styling (which I moved from the layout the a css file).
a more basic vuetify plugin that worked for me:
import Vue from "vue"
import Vuetify from "vuetify"
version "^2.1.1" ,
Vue.use(Vuetify)
export default (ctx) => {
const vuetify = new Vuetify({
theme: {
dark: false, // From 2.0 You have to select the theme dark or light here
},
})
ctx.app.vuetify = vuetify
ctx.$vuetify = vuetify.framework
}
You'll have to install icons as well, vuetify default is mdi which is installed with npm install #mdi/font -D
managed to fix this by disabling tree shaking for vuetify. Change the following in nuxt.config.js:
buildModules: [
["#nuxtjs/vuetify", { treeShake: false }],
],
I would like to dismiss this error on my vue file
I am trying to add this processor line
<!-- eslint-disable-next-line vue/no-use-v-if-with-v-for -->
and
<!-- eslint-disable-next-line vue/no-confusing-v-for-v-if -->
but neither
Nor
dismiss the eslint warning
[eslint-plugin-vue] [vue/no-use-v-if-with-v-for]
The 'value' variable inside 'v-for' directive should be replaced with a computed property that returns filtered array instead. You should not mix 'v-for' with 'v-if'.
I'm using the vetur extension for VSCode.
I added the precessor line fallowing this sample but eslint still warns about the next line.
PS. This solution is not the best one, but I needed it like this due the transition animation.
See Vetur's documentation:
Install ESLint plugin for the best linting experience. Vetur's template linting is only for quick start and does not support rule configuration.
So, you have to:
Install ESLint plugin
Enable vue plugin and disable Vetur's linting (add to VS Code config):
"vetur.validation.template": false,
"eslint.validate": [
"javascript",
"javascriptreact",
"vue"
]
If you don't have eslint and/or eslint-plugin-vue already installed, you should do that:
npm i eslint babel-eslint eslint-plugin-vue --save-dev
Simple config for ESLint:
{
"root": true,
"env": {
"node": true
},
"extends": ["plugin:vue/essential", "eslint:recommended"],
"rules": {
},
"parserOptions": {
"parser": "babel-eslint"
}
}
You should save it either to .eslintrc file or to package.json under eslintConfig name.
And, it works:
If you really want to disable it, try the solution below (it works for me). Since you are specific about the rule it doesn't disable other warnings:
<!-- eslint-disable vue/no-v-html -->
<textarea
type="email"
name="message"
required
aria-required="true"
v-html="form.inputs.name.placeholder"
/>
<!-- eslint-enable -->
Try {{! template-lint-disable }}
I created a new nuxt app using npx create-nuxt-app <project-name> and chose to use eslint and prettier.
I opened the project's directory using vscode and installed the ESLint and Prettier - Code formatter, and Vetur extensions.
When I save a .vue file vscode formats the code, but in a way that breaks the settings in the nuxt project.
For example vscode transforms
<div
class="test"
style="background: red">
test
</div>
to
<div class="test" style="background: red">test</div>
but this breaks the vue/max-attributes-per-line rule.
How do I set up vscode to use the nuxt project's linting and prettyfying rules?
When starting a new nuxt project using npx create-nuxt-app, check both ESLint and Prettier for linting options and choose the recommended jsconfig.json option.
Then do the following:
install additional npm dev packages
npm install --save-dev babel-eslint eslint eslint-config-prettier eslint-loader eslint-plugin-vue eslint-plugin-prettier prettier
Install VS Code extensions
Prettier
ESLint
Vetur
Formatting Toggle (optional)
Change your workplace settings (.vscode/settings.json) to the following:
{
"eslint.format.enable": true,
"vetur.format.defaultFormatter.html": "prettier"
}
You can toggle auto fixing using the Formatting Toggle extension, or if you didn't install it by changing your user settings:
{
"editor.formatOnPaste": true,
"editor.formatOnSave": true,
"editor.formatOnType": true
}
Change your .prettierrc file (optional)
{
"semi": false,
"arrowParens": "always",
"singleQuote": true,
"trailingComma": "none",
"bracketSpacing": true,
"endOfLine": "lf"
}
Install the extensions:
Vue
Vue 2 Snippets
Vue Peek
Vetur
ESLint
Go to File > Preferences > Settings and edit the User Settings file, adding the following configuration:
{
...... ,
"vetur.format.defaultFormatter.js": "vscode-typescript",
"vetur.format.defaultFormatter.html": "js-beautify-html",
"javascript.format.insertSpaceBeforeFunctionParenthesis": true,
"eslint.autoFixOnSave": true,
"eslint.validate": [
{
"language": "vue",
"autoFix": true
},
{
"language": "html",
"autoFix": true
},
{
"language": "javascript",
"autoFix": true
}
],
}
With this configuration, VSCode will perform validation for these three file types: vue, HTML and JavaScript. Now go back to the src/App.vue file and press ctrl+alt+f on Windows or ctrl+shift+i on Linux or ctrl+options+f on Mac OS to perform the formatting of the code. ESLint will validate the code and display some errors on the screen.
Any errors can be corrected automatically, and it’s not necessary to correct each error manually. To do this, you can
press
ctrl+shift+p
and select
ESLint: Fix all problems
I have followed the steps outlined in the VS Code documentation for getting Intellisense working for React Native by installing typings for React Native. Now, what do I need to do to get autocomplete working? For instance, if I type <Text>, I would like to see an automatic closing of that tag. What am I missing here? This seems like it shuld work out of the box.
To enable IntelliSense (autocomplete) you have to install the official React Native Tools extension.
Installation
Open Command Palette by pressing F1, type ext install and press Enter, then look for React Native Tools extension.
Create a jsconfig.json file
You should create a jsconfig.json file in you root directory. It can be empty but must be present. The presence of such a file in a directory indicates that the directory is the root of a JavaScript project.
(Optional)
The file itself can optionally list the files belonging to the project, the files to be excluded from the project, as well as compiler options.
{
"compilerOptions": {
"target": "ES6",
"module": "commonjs",
"allowSyntheticDefaultImports": true
},
"exclude": [
"node_modules"
]
}
You can find more at https://code.visualstudio.com/docs/languages/javascript#_javascript-projects-jsconfigjson
Create a .babelrc file for ReactNative Packger transformer (optional, if you want to use TypeScript)
You should create a .babelrc file with sourceMaps = true and "presets": [ "react-native" ] for better source-mapping support. (required if you want TypeScript support).
{
"presets": [
"react-native" // this is required for debugging with react-native/packager/transformer
],
"plugins": [],
"sourceMaps": true // must be true react-native/packager/transformer using with node-module-debug
// because of some bugs from vscode-node-debug & vscode-react-native, "sourceMaps" cannot be "inline" or "both"
}
Install typings for React Native (optional)
To get IntelliSense for React Native, run npm install typings -g and then typings install dt~react-native --global in your terminal.
Hope this helps!!
React Native Tools in VSCode can't help you close the Tag after you typed<Text>,you can try to install Auto Close Tag and Auto Rename Tag
In my case, I have to copy jsconfig.json to tsconfig.json, close Visual Code and reopen it. Then it works properly.
jsconfig.json
{
"compilerOptions": {
"allowSyntheticDefaultImports": true
},
"exclude": [
"node_modules"
]
}
tsconfig.json
{
"compilerOptions": {
"allowJs": true,
"allowSyntheticDefaultImports": true
},
"exclude": [
"node_modules"
]
}
I am also not getting any IntelliSense and also package auto-import is not working. Since I am not using Typescript, deleting the tsconfig.json helped me.
Take backup of your tsconfig.json file first
In my case, I've already installed many react-native extensions for autoSuggestion and another helper extension, e.g. "React Native Tools", and "React-Native/React/Redux snippets for es6/es7"
Issues:
autoSuggestion keywords not coming while typing.
command(in IOS) + click not letting me to jump on the target files.
Recently I have seen in VS Code editor for new React-native applications autoSuggestion not working.
Steps I have followed to solve:
Go to Extensions
Search for React or React-native
Remove the installed extension
Reload it.
When I'm launching my project using React-Native default packager, I have this error: Unexpected token on this line:
static propTypes = {
/// ...
};
I took a look on React-Native issues on GitHub, but I didn't find a solution.
Any suggestion?
React-Native packager use Babel for transfer ES6 and ES7, but NOT ALL features. The enable list is here. In your case, class-props is not enabled by default in RN packager. You can use Babel to compiler your code before packager, or just enable it in the packager setting. See this official doc for more information.
Try appending your propTypes to your class:
var MyClass extends React.Component {
....
}
MyClass.propTypes = {
.... /* enter proptypes here */
}
After #Fomahaut answer, I keep looking on Facebook's GitHub repository and found this issue: https://github.com/facebook/react-native/issues/2182
Create a .babelrc file at the project's root directory
Add more rules to Babel
Example:
{
"retainLines": true,
"compact": true,
"comments": false,
"whitelist": [
"es6.arrowFunctions",
"es6.blockScoping",
"es6.classes",
"es6.constants",
"es6.destructuring",
"es6.forOf",
"es6.modules",
"es6.parameters",
"es6.properties.computed",
"es6.properties.shorthand",
"es6.spread",
"es6.tailCall",
"es6.templateLiterals",
"es6.regex.unicode",
"es6.regex.sticky",
"es7.asyncFunctions",
"es7.classProperties",
"es7.comprehensions",
"es7.decorators",
"es7.exponentiationOperator",
"es7.exportExtensions",
"es7.functionBind",
"es7.objectRestSpread",
"es7.trailingFunctionCommas",
"regenerator",
"flow",
"react",
"react.displayName"
],
"sourceMaps": false
}
According to this answer, you need to install a plugin for class properties as of Babel 6.
As of Babel 6, you now need the transform-class-properties plugin to
support class properties.
Steps:
Run this: npm install babel-plugin-transform-class-properties
Add this to your .babelrc: "plugins": ["transform-class-properties"]
(Note, it's a plugin, not a transform; so don't put it in the "presets" list.)
Worked for me.
Install the stage-0 Babel preset (npm i --save-dev babel-preset-stage-0) and add it to .babelrc file's presets section, e.g.:
{ "presets": ["react", "es2015", "babel-preset-stage-0"] }
See if that helps:
$ npm install babel-plugin-transform-decorators
navigate to /<your project root>/node_modules/react-native/packager/react-packager/.babelrc
Add "transform-decorators" to this list:
{
"retainLines": true,
"compact": true,
"comments": false,
"plugins": [
"syntax-async-functions",
"syntax-class-properties",
"syntax-trailing-function-commas",
"transform-class-properties",
"transform-es2015-arrow-functions",
"transform-es2015-block-scoping",
"transform-es2015-classes",
"transform-es2015-computed-properties",
"transform-es2015-constants",
"transform-es2015-destructuring",
["transform-es2015-modules-commonjs", {"strict": false, "allowTopLevelThis": true}],
"transform-es2015-parameters",
"transform-es2015-shorthand-properties",
"transform-es2015-spread",
"transform-es2015-template-literals",
"transform-flow-strip-types",
"transform-object-assign",
"transform-object-rest-spread",
"transform-react-display-name",
"transform-react-jsx",
"transform-regenerator",
"transform-es2015-for-of",
-->"**transform-decorators**"<--
],
"sourceMaps": false
}