Hello I use latest Sublime Text 4 with Emmet and reactjs source with build in Syntax -> Javasript > JSX and it work.
I change default emmet setting "jsx_prefix": true, to false, and it work - now I can expand tags without <.
But i want change default expand Component/ -> <Component> to <Component />
I try change "markup_style": "html", to xhtml or xml but it not work.
And in emmet setting i can see this param, which maybe can solve my problem:
// See `GlobalConfig` interface for supported properties: https://github.com/emmetio/emmet/blob/master/src/config.ts
// Example:
// "config": {
// "markup": {
// "snippets": {
// "foo": "foo.bar>baz"
// },
// "options": {
// "output.selfClosingStyle": "xhtml"
// }
// }
// }
"config": {},
Because I don't know TS, I can't read source in GitHub to solve this, can anyone know how to use this config param not for one snippet as in example, but for JSX with "output.selfClosingStyle": "xhtml"?
I try write something like this(but not work):
"config": {
"markup": "jsx",
"options": {
"output.selfClosingStyle": "xhtml"
}
}
Help me to use JSX self closing tags with emmet in ST4 pls.
In Sublime Text, you can specify config either globally for syntax type (markup or stylesheet) or for specific syntax.
Syntaxes are listed in syntax_scopes option of Emmet config, which is a mapping of syntax name to Sublime Text internal scope (you can create your own syntaxes like this as well).
In your case, you should specify config for jsx syntax, like this:
{
"config": {
"jsx": {
"options": {
"output.selfClosingStyle": "xhtml"
}
}
}
}
Related
I'm learning Nuxt. I've set up a project, with ESLint included. Here's my index.vue:
<template>
<h1 class=reddo>Hello, world</h1>
</template>
<script>
export default {
head() {
// Set Meta Tags for this Page
}
// ...
}
</script>
<style>
.reddo {
color: red;
}
</style>
When I run this I get this:
(It doesn't say this is from ESLint, but I assume it is). The first error complains about the indentation before the <h1>. Do I need to do something to make it understand .vue files so it validates only the <script> part or something?
Thank you in advance.
Since you followed the Nuxt intro video, you likely have a .eslintrc.js file in your project folder that extends a config from #nuxt/eslint-config that adds this parser and some default rules (source code).
The default configuration is linting the entire .vue file, as the Vue parser understands them. There are some limitations to the parser as well which may be triggering your linter if there were any changes not from the Nuxt config.
You can change or disable this configuration by editing your .eslintrc.js file; however, there are many advantages to statically analyzing your code using a linter. So consider finding or making a config that has few stylistic rules (or ones that you like) so you can still catch possible errors, including ones specific to Vue.
If you want to revert to a working .eslintrc.js file, try copying the changes from a new create-nuxt-app.
module.exports = {
root: true,
env: {
browser: true,
node: true
},
parserOptions: {
parser: 'babel-eslint'
},
extends: [
'#nuxtjs',
'plugin:nuxt/recommended'
],
plugins: [
],
// add your custom rules here
rules: {}
}
I am new in svelte. I trying to add ESLint to my svelte project.
My eslintrc.json:
{
"env": {
"es6": true,
"browser": true,
"node": true
},
"extends": [
"standard", "airbnb-base/legacy"
],
"plugins": [
"svelte3"
],
"overrides": [
{
"files": ["**/*.svelte"],
"processor": "svelte3/svelte3"
}
],
"parser": "babel-eslint",
"parserOptions": {
"ecmaVersion": 2019,
"sourceType": "module"
}
}
It works, but linter rules does not support sass syntax. I have this error.
How can I fix it?
If you're using some sort of preprocessor on the component styles, then it's likely that when this plugin calls the Svelte compiler on your component, it will throw an exception. In a perfect world, this plugin would be able to apply the preprocessor to the component and then use source maps to translate any warnings back to the original source. In the current reality, however, you can instead simply disregard styles written in anything other than standard CSS. You won't get warnings about the styles from the linter, but your application will still use them (of course) and compiler warnings will still appear in your build logs.
This setting can be given a function that accepts an object of attributes on a tag (like that passed to a Svelte preprocessor) and returns whether to ignore the style block for the purposes of linting.
The default is to not ignore any styles.
settings: {
'svelte3/ignore-styles': () => true
}
I faced the same issue and there is no documentation on how to use the svelte3/ignore-styles in settings to ignore the styles in eslint. Here is how i fixed the issue -
I Changed .eslintrc to .eslintrc.js in order to use the ignore rule as a function -
module.exports = {
...
"rules" : {
},
"settings": {
"svelte3/ignore-styles": () => true
}
}
In my Chai tests I often find myself wanting to use their assertions that are something like .to.be.empty, .to.be.true e.t.c., because I find them to be cleaner to read than .to.be.length(1) or .to.be.equal(true). However, this breaks my linter (I'm using default Airbnb linting).
I could use the // disable-eslint-line syntax, but then I'd have to add it to every single line that reads like that and that seems tedious.
I've also read about the DirtyChai library, but that would require me to go back through my entire testing library adding brackets to them all which seems like something I shouldn't have to do simply to get my linter to pass something it should probably be OK with in the first place.
Does anyone know a nicer way to handle this than the ways I've outlined above?
You can disable the rule for the entire file using eslint-disable at the top of the file in question:
/* eslint-disable no-unused-expressions */
expect(someTrueValue).to.be.true;
However, adding this at the top of every test file can be tedious. To disable this rule for all relevant files, you can:
Put a new .eslintc configuration file in the same directory as your test files, configured to disable that rule. This allows you to use the default configuration for all other rules while ignoring that rule specifically only on files in that folder. ESLint calls this Configuration Cascading.
{
"rules": {
"no-unused-expressions": "off"
}
}
Use the overrides key in your main .eslintrc file to disable rules for groups of files with glob pattern matching:
{
"overrides": [
{
"files": ["*.test.js", "*.spec.js"],
"rules": {
"no-unused-expressions": "off"
}
}
]
}
This also allows you to disable other rules which become troublesome in testing, such as no-underscore-dangle when using rewire.
Just found another option using Relative Glob Patterns:
In your .eslintrc file:
"overrides": [
{
"files": "*.test.js",
"rules": {
"no-unused-expressions": "off"
}
}
]
I've made a small plugin called eslint-plugin-chai-friendly that overrides the default no-unused-expressions rule and makes it friendly towards chai. The modified rule ignores the expect and should statements while keeping default behavior for everything else.
Combining jonalvarezz's answer with Ihor Diachenko's answer gave me exactly what I wanted:
npm install --save-dev eslint-plugin-chai-friendly
// .eslintrc.js
module.exports = {
// ...
plugins: ['chai-friendly'],
overrides: [{
files: '*.test.js',
rules: {
'no-unused-expressions': 'off',
'chai-friendly/no-unused-expressions': 'error',
},
}],
// ...
}
This way, the no-unused-expression rule will only be overridden in *.test.js files
AND
a no-unused-expression rule will still be in place to catch any unused expressions in the test files that are unrelated to chai.
In case anyone is stumbling upon this today, I had the same issue and found this solution on eslint documentation. In your eslint configuration file, you can specify one or several environments, which will predefine global variables for this environment. For us, it'd be mocha, and you'd configure like this in your .eslintrc.json:
{
"env": {
"mocha": true
},
...
...
...
}
As a result, it will remove all false positive about mocha describe, it, beforeEach, etc. without needing to completely disable eslint or completely disable any specific rule.
Tested with ESLint v.4.11 and mocha 5.0
I had this issue with tslint and solved it by simply moving the rule for unused expressions down one level. My ./tslint.json has all the other rules I care about, then I made ./src/tslint.json that just looks like
{
"rules": {
"no-unused-expression": true
},
"extends": "../tslint.json"
}
tslint automatically checks for a config file in every level as it descends the tree (with --project or using the VSCode extension) so this means that my tests (under ./test/) have all the other rules applied, but no-unused-expression only applies to files under ./src/.
I have a some snippet:
"JSON stringify": {
"prefix": "jst",
"body": [
"<pre>{JSON.stringify($1, null, 2)}</pre>"
]
},
and it works inside js scope, but when I'm trying to do same trick inside jsx render - it dont want to be working.
How to tell my VSCode, that I want to do same things inside jsx?
Maybe adding "scope" to your snippet:
"scope": "javascript,typescript,javascriptreact",
javascriptreact ---> jsx files
It should be like this...
"JSON stringify": {
"scope": "javascript,typescript,javascriptreact",
"prefix": "jst",
"body": [
"<pre>{JSON.stringify($1, null, 2)}</pre>"
]
},
Putting that snippet into your global snippets file should work.
Gear Icon/User Snippets/ myGlobalSnippets.code-snippets
It looks like inside jsx, the type of proposed snippets is not "javascript" but "jsx":
When you go to File / Preferences / User snippets you can look for the jsx format (file name jsx.json)
If you put your snippet in that file, it should be available inside your jsx
I had to put "scope": "javascript,jsx,jsx-attr". Perhaps there's a neater way but that did it for me.
In vscode Press the gear button then choose User Snippets then type javascriptreact if you are using "javascript" or typescriptreact for"typescript" then past the snippet code that you want :D
I'm using StealJS to load the Openlayers library. It seems to be loading the debugging - unbuilt version of openlayers differently than the built version.
When using the built version, it works correctly and returns the actual ol object. When using the debug version, it returns a wrapper object containing ol. This breaks all of the calls to ol.map, etc..
I am importing the ol file like this:
import ol from 'openlayers';
This is the ol-debug.js object returned using console.log in chrome:
{
CLOSURE_NO_DEPS: true
COMPILED: false
goog: Object
module: undefined
ol: Object //this is the object I want
__proto__: Object
}
Using the built version, the object is the actual ol object containing animation, map, layer, etc.
Using npm config:
"npmIgnore": [
"openlayers"
],
"paths": {
"openlayers": "node_modules/openlayers/dist/ol-debug.js"
},
"meta": {
"openlayers": {
"format": "global"
}
},
Its really difficult to debug apps without the debug version of the file. And switching to the debug version breaks all of the widgets because ol.map now needs to become ol.ol.map since ol is nested inside a parent object.
The solution was to add a exports property:
"meta": {
"openlayers": {
"format": "global",
"exports": "ol"
}
},