I'm using brackets, and I dicided to use stylus instead of scss. For scss emmet's snippent works great, when i've added
"scss": {
"extends": "css"
}
to snippets.json
but
"styl": {
"extends": "css"
}
doesn't work for stylus. I cant understand why.
You can add 'text/x-styl': 'stylus' under "modeMap" in editor.js on line 48, and in node_modules/emmet/lib/resolver/css.js configure your code style on line 113
Related
I'm new to vscode and can't get snippets to work properly inside of Vue files. They work in /snippets/vue.json:
{
"<template></template>": {
"prefix": "template",
"body": [
"<template>$1</template>"
]
}
}
This works, as long as it is written in the vue base layer but not inside script/template/style tags. I've tried adding it to vue-injection-markdown.json which I thought is used for exactly that but it doesn't work. I've also created a vue-html.json file and added the json there but it also doesn't make the snippets work:
{
"hello": {
"prefix": "hello",
"body": [
"blub"
]
}
}
I've installed both these plugins:
Vue Language Features (Volar)
TypeScript Vue Plugin (Volar)
What am I doing wrong?
Ok, it has to be defined either in global.code-snippets with a html scope or in the html.json file.
I'm using Jest as a test runner in a Vue 3 project that makes use of the #vueform slider plugin:
https://github.com/vueform/slider
the code in #vueform/slider/dist/slider.js:1 tiggers a "SyntaxError: Cannot use import statement outside a module" error.
I've tried adding a "transformIgnorePatterns" entry in the package.json's Jest configuraiton:
"jest": {
"testEnvironment": "jsdom",
"moduleFileExtensions": [
"js",
"json",
"vue"
],
"transform": {
"^.+\\.(js|jsx)$": "babel-jest",
"^.+\\.(vue)$": "vue3-jest"
},
"transformIgnorePatterns": ["/node_modules/(?!#vueform/slider/)", "node_modules/(?!#vueform/)"]
}
I Also added "type": "module" to package.json
And tried changing
import SliderPrice from "#vueform/slider"
to
const SliderPrice = require("#vueform/slider")
Still getting the same error!
Any ideas how I can solve this issue? I can't test anything with Jest until this error gets sorted.
Edit:
I forgot to add this: Intially, the error message details included the entire (minimized) slider.js file. After adding "type": "module" to package.json the details now include just this line:
({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,jest){import { toRefs as t, ref as e, computed as r, reactive as n, onMounted as i, onUnmounted as o, watch as a, openBlock as s, createBlock as l, mergeProps as u } from "vue";
Edit 2:
My babel config is in a .babelrc file:
{
"presets": ["#babel/preset-env"]
}
Vue is the front end setup within a Laravel application, but the webpack.mix.js configuration file doesn't use babel.
Edit 3:
After a few more hours of playing around with the settings, I believe that this is Babel related:
If I delete my .babelrc file then I start getting the "SyntaxError: Cannot use import statement outside a module" error for my own .vue files. This shows that with the .babelrc file, my ES6 javascript files are being transformed to ES5.
So the Vue plugins, like #vueform/slider/ are NOT being transformed to ES5 by Babel, even though the correct path is defined in "transformIgnorePatterns"
For vue3 and 2 (I didn't test it on 2 but should work)
npm i -D #babel/preset-env babel-jest
babel.config.js
{
"presets": ["#babel/preset-env"]
}
I have had issues also with vue files. Below my configuration works ok.
npm i -D #vue/vue3-jest # or 2 if you are on second version
jest.config.js
export default {
testEnvironment: 'jsdom',
transform: {
'^.+\\.[t|j]sx?$': 'babel-jest',
'^.+\\.vue$': '#vue/vue3-jest',
},
}
I'm trying to use Tailwindcss #apply directive in a <style> tag of a Nuxt.js Vue file. Everything works fine, but I keep getting some annoying red squiggly lines. Please, guys, I need help... Thank you!
Below is a screenshot and a snippet:
<style scoped>
.title {
#apply text-orient font-light block text-5xl pt-2;
}
.message {
#apply font-light pb-4 text-orient text-2xl text-blue-bayoux
}
</style>
There is no built-in way to solve this within VS Code. The recommended way to solve this is by making use of the Stylelint extension to handle your CSS linting (& SCSS and/or Less, etc.). It's very powerful and likely will improve your stylesheets beyond removing these errors for you.
You need to add the styleint dependencies to your project. Run:
npm install --save-dev stylelint stylelint-config-standard
yarn add -D stylelint stylelint-config-standard
Create a stylelint.config.js in the root of your project. (same location where your package.json is stored)
Place this snippet into it:
module.exports = {
extends: ["stylelint-config-standard"],
rules: {
"at-rule-no-unknown": [
true,
{
ignoreAtRules: [
"tailwind",
"apply",
"variants",
"responsive",
"screen",
],
},
],
"declaration-block-trailing-semicolon": null,
"no-descending-specificity": null,
},
};
Install these extensions to your VS Code setup:
Stylelint
Tailwind CSS IntelliSense
Last but not least, adjust your local or global VS Code settings.json file to include:
"css.validate": false,
"less.validate": false,
"scss.validate": false,
This way you will have the native linting "disabled", but are still ensuring it is linted using the Tailwind IntelliSense plugin.
Disable Vetur's style validation
Such CSS warnings may originate from the Vetur extension, which may very well be the case if the warning's icon (as seen in VSCode's "Problems" pane) is a Vue logo.
By disabling Vetur's style validation, you may lose other benefits. Although, in the long-run, it's probably better to rely on a more full-featured validator/linter than this extension.
Go to the Vetur extension settings and uncheck the option for style validation.
--- or ---
Set the option per-project, in a .vscode/settings.json file in the project root, with the following:
"vetur.validation.style": false
Vetur warnings look something like:
I found another solution Usage of Tailwind with nuxt lead to weird #apply issue #300
Just add lang="postcss" to style tag and with this fix, I haven't any error.
<style lang="postcss" scoped>
.title {
#apply text-purple-600 font-bold;
}
</style>
i think you are using prettier and that plugin get error when you make #apply in one line so try this:
<style scoped>
.title {
#apply text-orient;
#apply font-light;
#apply block;
#apply text-5xl;
#apply pt-2;
}
.message {
#apply font-light;
#apply pb-4;
#apply text-orient;
#apply text-2xl;
#apply text-blue-bayoux;
}
</style>
2 Steps
Add the lines below into: .vscode > settings.json
"css.validate": false,
"less.validate": false,
"scss.validate": false,
Install StyleLint Extension
https://marketplace.visualstudio.com/items/shinnn.stylelint
Restart, it's done!
I had the same problem with Nuxt and the solution was to follow the steps in this blog, the TL:DR is:
Install the stylelint vscode extension
Add this configuration in your stylelint.config.js
rules: {
'at-rule-no-unknown': [
true,
{
ignoreAtRules: [
'tailwind',
'apply',
'variants',
'responsive',
'screen',
],
},
],
'declaration-block-trailing-semicolon': null,
'no-descending-specificity': null,
},
In the vscode configuration uncheck the option css validate or add this to your vscode settings.json file "css.validate": false
with this steps all will work perfect.
Just in case, I had a problem with the prettier formatting too, and it was fixed with this option in my vscode settings.json file "vetur.format.defaultFormatter.html": "prettier",
Try adding the extension PostCSS Language Support; it adds support for modern and experimental CSS within Visual Studio Code.
I use VS Code and added the following to my settings:
"files.associations": {
"*.vue": "html"
}
Afterwards, the error was gone.
I am using create-react-app with craco (Create-React-App-Configuration-Override)
Craco is not very exotic. It simply allows me to use my own eslintrc file with create-react-app.
I am trying to use a custom eslint formatter, specifically eslint-formatter-friendly does what I need (link to files at line numbers via iTerm/Guake terminals), but there are plenty of alternative formatters: http://npmsearch.com/?q=eslint-formatter
I tried setting a format: 'unix' or formatter: 'unix' in my .eslintrc.js file - but this didn't work, eslint explicitly gave an error saying something like "unrecognized top-level property".
I looked for any way I could specify formatter in the .eslintrc.js file, but I figured out that's not an option. After searching and scanning through the source for gulp-eslint, eslint-grunt and grunt-eslint, eventually I looked more closely at the source for for craco - where is reads a little eslint configuration: https://github.com/sharegate/craco/blob/master/recipes/use-an-eslintrc-config-file/craco.config.js
The source that processes this: https://github.com/sharegate/craco/blob/master/packages/craco/lib/features/webpack/eslint.js
All I needed to do was use this craco.config.js:
/* globals module */
const { ESLINT_MODES } = require("#craco/craco");
const reactHotReloadPlugin = require('craco-plugin-react-hot-reload');
module.exports = {
plugins: [{
plugin: reactHotReloadPlugin
}],
eslint: {
mode: ESLINT_MODES.file,
loaderOptions: {
formatter: require("eslint-formatter-friendly")
}
},
};
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 }}