On save of any file, it is indenting with two tabs i.e 4 space in the beginning. Which rule is conflicting with prettier and .vscode settings?
Editor config settings are below:
root = true
[*]
charset = utf-8
end_of_line = lf
insert_final_newline = true
indent_style = space
indent_size = 2
trim_trailing_whitespace = true
max_line_length = 120
Trying to indent with 2 space, this is happening only
with json files and other scripts.
vscode settings
{
"[javascript]": {
"editor.formatOnSave": false
},
"eslint.alwaysShowStatus": true,
"files.autoSave": "onFocusChange",
"prettier.proseWrap": "preserve",
"emmet.includeLanguages": {
"javascript": "javascriptreact",
"vue-html": "html",
"plaintext": "jade",
"edge": "html"
},
"emmet.syntaxProfiles": {
"javascript": "jsx"
},
"emmet.triggerExpansionOnTab": true,
"emmet.showSuggestionsAsSnippets": true,
"files.associations": {
"*.js": "javascriptreact"
},
"editor.fontSize": 14,
"git.enableSmartCommit": true,
"git.confirmSync": false,
"search.exclude": {
"**/__snapshots__/**": true,
"**/.bin": true,
"**/.git": true,
"**/.next": true,
"**/bower_components": true,
"**/coverage/**": true,
"**/node_modules": false,
"**/node_modules/**": true,
"**/report/**": true,
"**/tmp": true
},
"javascript.updateImportsOnFileMove.enabled": "always",
"explorer.confirmDragAndDrop": false,
"explorer.confirmDelete": false,
"workbench.editor.enablePreviewFromQuickOpen": false,
"files.exclude": {
".next": true,
"*.log": true,
"**/__pycache__": true,
"**/o": true,
"dist": true,
"geckodriver.log": true,
"node_modules/": true,
"package-lock.json": true,
"yarn.lock": true
},
"window.zoomLevel": 1,
"editor.find.globalFindClipboard": true,
"editor.fontLigatures": true,
"jshint.enable": false,
"editor.formatOnType": true,
"team.showWelcomeMessage": false,
"git.autofetch": true,
"workbench.startupEditor": "newUntitledFile",
"editor.codeActionsOnSave": {
// For ESLint
"source.fixAll.eslint": true,
// For TSLint
"source.fixAll.tslint": true,
// For Stylelint
"source.fixAll.stylelint": true
},
"launch": {},
"workbench.colorCustomizations": {},
"sync.forceUpload": true,
"sync.forceDownload": true,
"sync.autoDownload": true,
"vetur.format.defaultFormatter.html": "js-beautify-html",
"intelephense.diagnostics.undefinedTypes": false,
"workbench.editorAssociations": [],
"diffEditor.codeLens": true,
"editor.formatOnSave": true,
"team.showFarewellMessage": false,
"eslint.validate": [],
"vetur.validation.template": false,
"prettier.enable": true,
"editor.formatOnPaste": true,
"editor.tabSize": 2,
"files.insertFinalNewline": true,
"[json]": {
"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.tabSize": 2
},
"[jsonc]": {
"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.tabSize": 2
},
"editor.tokenColorCustomizations": null
}
This was due to an extension: 'lonefy.vscode-js-css-html-formatter'.
You can add this rules for json files in your settings.json:
{
"[json]": {
"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.tabSize": 2
},
"[jsonc]": {
"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.tabSize": 2
}
}
And to be explicit, you can also add this one outside of the [json] block:
{
"prettier.tabWidth": 2
}
just add this line in your .prettierrc file, here written in yaml style
overrides:
- files: '*.json'
options:
semi: true
parser: 'json'
That's all folk's !
Related
Trying to get Eslint and Prettier to work on Vue projects. Having a couple of issues though.
For example, I have a rule setup is Eslint to add a space before function parens but it won't format:
Another issue is, I get a error about the tab width in the template section (but I've specified I want 4 spaces in Prettier). Any where would this rule be coming from? I haven't put 2 spaces for template section anywhere in the code:
As an FYI, I'm running Lunvarvim, which (not to blow too much smoke) is a great IDE which I'd like to continue to use if I can resolve this few pain points.
Here is my setup:
Eslint
module.exports = {
env: {
browser: true,
es6: true,
amd: true,
jquery: true,
jest: true,
'jest/globals': true,
},
extends: [
'plugin:jest/recommended',
'plugin:cypress/recommended',
'eslint:recommended',
'plugin:prettier/recommended',
'plugin:vue/recommended',
],
globals: {
Atomics: 'readonly',
SharedArrayBuffer: 'readonly',
$: true,
M: true,
Vue: true,
axios: true,
moment: true,
get: true,
process: true,
global: true,
accounting: true,
Qty: true,
Stripe: true,
Chart: true,
_: true,
},
parserOptions: {
parser: 'babel-eslint',
ecmaVersion: 2018,
sourceType: 'module',
},
plugins: ['vue'],
overrides: [
{
files: ['*.spec.js'],
rules: {
'no-unused-expressions': 0,
},
},
],
rules: {
'object-curly-spacing': ['error', 'always', { objectsInObjects: true }],
'space-in-parens': ['error', 'never'],
'array-bracket-spacing': ['error', 'never'],
'space-before-function-paren': ['error', 'always'],
'vue/component-name-in-template-casing': [
'error',
'kebab-case',
{
registeredComponentsOnly: true,
ignores: [],
},
],
'vue/no-unused-properties': [
'error',
{
groups: ['props', 'data', 'computed', 'methods'],
},
],
indent: ['error', 4],
'linebreak-style': 0,
'global-require': 0,
quotes: ['error', 'single'],
semi: ['error', 'always'],
'no-trailing-spaces': ['warn', { skipBlankLines: true }],
'eol-last': ['warn', 'always'],
'vue/html-self-closing': [
'error',
{
html: {
normal: 'any',
},
},
],
'vue/valid-v-slot': [
'error',
{
allowModifiers: true,
},
],
},
};
Prettier
{
"tabWidth": 4,
"singleQuote": true
}
Try to move the Prettier configuration into your package.json and make sure you have installed eslint-config-prettier
I have this regex
/[-a-zA-Z0-9#:%._\+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}([a-zA-Z0-9#%._~#?={}]+-*[a-zA-Z0-9#%._~#=\/;]+)+.(?!-)[a-z]{2,24}\b((?:\{[^{}]*}|[-a-zA-Z0-9#%_+.~?&#\/=:$\[\]])*)$/
Which I want to match with these urls to true since I'm getting false with my current regex:
"ftp://user#host.com:80/abc/": true
"ftp://host.com": true
"http://abcewe.com": true
"https://abcewe.com": true
"mailto:someone#example.com": true
"news:newsgroup-name": true
"telnet://user:password#host:100": true
"http://ab-c.com": true
What do I need to add to match these urls?
Thank you very much for the help.
Note: I need the other codes so I cant remove them.
Note: Here is the full urls that I need to match. The rest aside above is already match with this regex, the above urls isnt.
{
"http://goog": false,
"http://googl": false,
"http://google": false,
"https://www.domains.com/#home": true,
"https://www.domains.com/{firstname}_{lastname}": true,
"https://www.domains.com/file[3].html": true,
"https://www.domains.com/?name=fred;age=50": true,
"https://www.domains.com/{name{age}}": false,
"https://www.domains.com/?name=fred;": false,
"http://www.google.com": true,
"https://www.amazon.com": true,
"http://joe:secret#www.liquidcrystalstudios.co.cc:8080/abc/": true,
"http://www.abcde.com:80/abc/": true,
"ftp://user#host.com:80/abc/": true,
"http://www.abcde.com/abc/": true,
"http://www.abcde.com/": true,
"http://joe:secret#www.liquidcrystalstudios.co.cc": true,
"http://jocce:seccccret#www.liquidcrystalstudios.co.cc": true,
"ftp://:abc#host.com/": false,
"ftp://foo:#host.com/": false,
"ftp://host.com": true,
"http://abcde.com": true,
"https://abcde.com": true,
"gopher://gopher.meulie.net/": true,
"mailto:someone#example.com": true,
"news:newsgroup-name": true,
"nntp://wild.server.example/example.group.n%2Fa/12345": true,
"telnet://user:password#host:100": true,
"wais://100.64.0.0:5": true,
"file://vms.host.edu/disk$user/my/notes/note12345.txt": true,
"prospero://host.dom//pros/name": true,
"abc://a.com": false,
"://abc.com": false,
"http//abc.com": false,
"http:abc.com": false,
"HTTP://www.ABCDW.com/ABC/": true,
"http://www.亜蔭.com/亜蔭/": false,
"http://www.弌傲僉.com/弌傲僉": false,
"http://www.俱咡.com/俱咡": false,
"http://www.丂㒒儈.com/丂㒒儈": false,
"http://www.亜腕弌.com/亜腕弌": false,
"http://www.アバ.com/ショアバ": false,
"http://www.アバショ.com/ジウンカ": false,
"http://174.129.0.77": true,
"http://174.1a.a.77": false,
"http://174.10.23.0": false,
"http://0.10.23.7": false,
"http://174.10.23.+7": false,
"http://-174.10.23.7": false,
"http://17-4.10.23.5": false,
"http://1.0.0.1": true,
"http://126.255.255.254": true,
"http://100.25.36.14": true,
"http://128.0.0.1": true,
"http://191.255.255.254": true,
"http://150.25.36.14": true,
"http://192.0.0.1": true,
"http://223.255.255.254": true,
"http://200.25.36.14": true,
"http://10.0.0.0": false,
"http://10.1.2.3": true,
"http://10.255.255.255": true,
"http://172.16.0.0": false,
"http://172.0.0.5": true,
"http://172.31.255.255": true,
"http://192.168.0.0": false,
"http://192.168.4.4": true,
"http://192.168.255.255": true,
"http://126.255.255.255": true,
"http://127.0.36.14": true,
"http://127.112.0.1": true,
"http://10.190.201.10:0?port=0": false,
"http://10.190.201.10:1?port=1": true,
"http://10.190.201.10:21?port=21": true,
"http://10.190.201.10:80?port=80": true,
"https://10.190.201.10:443?port=443": true,
"http://10.190.201.10:65535?port=65535": true,
"http://10.190.201.10:65535?port=65536": false,
"http://gooo.gl/09GxbZc": true,
"www.abc.com/miss-scheme": false,
"http&://10.190.201.10/wrong-scheme": false,
"http://test#url/wrong-hostname": false,
"http://FE80:0000:0000:0000:0202:B3FF:FE1E:8329/hostname-ipv6": false,
"http://10.190.201.10:10/path/1": false,
"HTTP://www.ABC①㌔№∮.com/①㌔№∮C/": false,
" http://🙂 😁 😆": false,
" http://zzz": false,
" :// . . ": false,
"https :// www. amazon. com": false,
"ht tps://ww w.am azon.co m": false,
"https://www.amazon.com ": false,
"https:// www. amazon. com ": false,
"htt ps://ww w.ama zon.c om ": false,
"https ://www .amazon .com ": false,
" https:// www. amazon. com": false,
"http://-abc.com": false,
"http://abc-.com": false,
"http://ab-c.com": true,
"http://.abc.com": false,
"http://abc..com": false,
"http://ab.c.com": true,
"http://+abc.com": false,
"http://ab+c.com": false,
"http://abc+.com": false,
"http://www.356.com": true,
"http://www.35accd6.com": true,
" http:/abc.com/acb": false,
"http:/abc.com/acb ": false,
"http:/a bc.com/a cb": false,
"http://a.c": false,
"http://.com": false,
"http://www.com": false
}
time : [
true, true, true,
true, true, true,
true, false, false
]
this is an array I'm getting, I want to find with if condition whether first for elements are true or not?
Just slice and check then. (you can use Array.prototype.every for the checking)
const time = [
true, true, true,
true, true, true,
true, false, false
]
console.log(time.slice(0, 4).every(item => item))
This is a really simple task using the slice and includes method. First slice the list, then check to see if it includes any false values.
let firstFourAreTrue = !time
.slice(0, 4)
.includes(false);
In the description of the question time I think it is an object.
This code returns values for 3 and 4. The values are set in an array and other values can be added.
var t = {
time: [
true, true, true,
true, true, true,
true, false, false
]
};
var p = [3, 4];
p.forEach(i => {
var ret = t.time.slice(0, i).every(x => x);
console.log('First',i, ret);
});
A solution without slicing.
const check = array => array.every((v, i) => i >= 4 || v);
console.log(check([true, true, true, true, true, true, true, false, false]));
console.log(check([false, true, true, true, true, true, true, false, false]));
console.log(check([true, false, true, true, true, true, true, false, false]));
console.log(check([true, true, false, true, true, true, true, false, false]));
console.log(check([true, true, true, false, true, true, true, false, false]));
I'm using prettier and eslint with typescript.
When I write some code and have to leave an empty function for reasons, Eslint and Prettier struggle adding and removing spaces between the empty function's braces.
Prettier is removing the space while Eslint is adding it.
What is expected:
constructor(
#inject('UsersRepository')
private usersRepository: IUsersRepository,
) {}
const example = ({ variable }) => {
console.log(variable)
};
What I get after saving (Eslint fixing on save):
constructor(
#inject('UsersRepository')
private usersRepository: IUsersRepository,
) { }
const example = ({ variable }) => {
console.log(variable)
};
Se the space between the constructor braces? That gives me a Delete `·` eslint(prettier/prettier) error.
When I save the file, or Prettier removes the space... then Eslint adds it again.
How can I solve this?
EDIT: I want to keep the destructuring assignment space (eg ({ variable })) but not on empty braces (eg {})
Below, my .eslintrc.json and prettier.config.js
{
"env": {
"es6": true,
"node": true,
"jest": true
},
"extends": [
"airbnb-base",
"plugin:#typescript-eslint/recommended",
"prettier/#typescript-eslint",
"plugin:prettier/recommended"
],
"globals": {
"Atomics": "readonly",
"SharedArrayBuffer": "readonly"
},
"parser": "#typescript-eslint/parser",
"parserOptions": {
"ecmaVersion": 2018,
"sourceType": "module"
},
"plugins": [
"#typescript-eslint",
"prettier"
],
"rules": {
"prettier/prettier": "error",
"class-methods-use-this": "off",
"#typescript-eslint/camelcase": "off",
"no-useless-constructor": "off",
"object-curly-spacing": [
"error",
"always"
],
"#typescript-eslint/no-unused-vars": [
"error",
{
"argsIgnorePattern": "_"
}
],
"#typescript-eslint/interface-name-prefix": [
"error",
{
"prefixWithI": "always"
}
],
"import/extensions": [
"error",
"ignorePackages",
{
"ts": "never"
}
]
},
"settings": {
"import/resolver": {
"typescript": {}
}
}
}
module.exports = {
singleQuote: true,
trailingComma: 'all',
arrowParens: 'avoid',
};
I've had very similar error, but in my case default VSCode TypeScript formatter was messing with braces.
In .vscode/settings.json add:
"javascript.format.insertSpaceAfterOpeningAndBeforeClosingEmptyBraces": false,
"typescript.format.insertSpaceAfterOpeningAndBeforeClosingEmptyBraces": false,
You might also find useful option:
"[typescript]": {
"editor.defaultFormatter": "dbaeumer.vscode-eslint"
}
You should use this in the settings file of vscode.
"prettier.bracketSpacing": false
I had the exact same problem, where prettier stopped working all of a sudden. Auto-format on save(vs code settings) adds a space for braces and linters threw an error on the same. Spend a lot of time debugging this and did the below steps to fix my issue
1: Re-install vscode prettier extension.
Go to vscode => cmd + p and type ext install esbenp.prettier-vscode.
2: My vscode settings.json and prettier.js looks somewhat like this
vscode settings.json
{
"editor.codeActionsOnSave": {
"source.organizeImports": true,
"source.fixAll.eslint": true,
"source.fixAll.tslint": true,
"source.fixAll.stylelint": true
},
"css.validate": false,
"files.autoSave": "off",
"typescript.updateImportsOnFileMove.enabled": "always",
"javascript.updateImportsOnFileMove.enabled": "always",
"editor.wordWrap": "on",
"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.formatOnSave": false,
"[typescriptreact]": {
"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.formatOnSave": true
},
"[javascript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.formatOnSave": true
},
"[typescript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.formatOnSave": true
}
}
Prettier.js
module.exports = {
semi: true,
trailingComma: 'none',
singleQuote: true,
printWidth: 80,
tabWidth: 2,
endOfLine: 'auto',
bracketSpacing: true,
proseWrap: 'always'
};
I has a bad experience with prettier thanks to this post I managed to put together a nice settings config so Im sharing it here and hopefully it will ;help someone top.
"gatsbyhub.commands.build.enableTracing": true,
"gatsbyhub.commands.build.graphqlTracing": true,
"gatsbyhub.commands.develop.changeHost": "localhost",
"window.zoomLevel": 0.6,
"js/ts.implicitProjectConfig.checkJs": true,
"js/ts.implicitProjectConfig.experimentalDecorators": true,
"color-highlight.languages": [
"*",
],
"importCost.javascriptExtensions": [
"\\.jsx?$",
],
"html-css-class-completion.JavaScriptLanguages": [
"javascript",
"typescriptreact"
],
"editor.tabSize": 2,
"editor.renderWhitespace": "none",
"editor.gotoLocation.multipleTypeDefinitions": "goto",
"workbench.editor.enablePreviewFromCodeNavigation": true,
"workbench.editor.enablePreviewFromQuickOpen": true,
"debug.allowBreakpointsEverywhere": true,
"debug.toolBarLocation": "docked",
"blade.format.enable": true,
"color-highlight.matchWords": true,
"path-intellisense.showHiddenFiles": true,
"path-intellisense.mappings": {
"${workspaceFolder}": true,
"${workspaceFolder}/gatsby": true,
},
"editor.formatOnSave": false,
"editor.formatOnType": true,
"workbench.colorCustomizations": {},
"material-icon-theme.activeIconPack": "react_redux",
"editor.semanticHighlighting.enabled": false,
"editor.highlightActiveIndentGuide": false,
"workbench.activityBar.visible": false,
"javascript.format.enable": true,
"javascript.autoClosingTags": true,
"javascript.validate.enable": false,
"javascript.format.semicolons": "insert",
"javascript.suggest.jsdoc.generateReturns": true,
"javascript.format.insertSpaceBeforeFunctionParenthesis": true,
"javascript.preferences.quoteStyle": "double",
"javascript.preferences.useAliasesForRenames": true,
"javascript.suggest.autoImports": true,
"javascript.updateImportsOnFileMove.enabled": "always",
"javascript.format.insertSpaceAfterConstructor": true,
"[javascriptreact]": {
"editor.autoIndent": "advanced",
"editor.autoClosingQuotes": "beforeWhitespace",
"breadcrumbs.showVariables": true,
"diffEditor.ignoreTrimWhitespace": true,
"editor.tabSize": 2,
"editor.useTabStops": true,
"editor.formatOnPaste": false,
"editor.formatOnSaveMode": "file"
},
"javascript.suggest.includeCompletionsForImportStatements": true,
"javascript.format.insertSpaceBeforeAndAfterBinaryOperators": true,
"javascript.format.insertSpaceAfterSemicolonInForStatements": true,
"javascript.format.insertSpaceAfterKeywordsInControlFlowStatements": true,
"javascript.format.insertSpaceAfterOpeningAndBeforeClosingNonemptyBrackets": true,
"javascript.format.insertSpaceAfterOpeningAndBeforeClosingJsxExpressionBraces": true,
"javascript.format.insertSpaceAfterOpeningAndBeforeClosingTemplateStringBraces": true,
"typescript.validate.enable": true,
"typescript.preferences.importModuleSpecifier": "non-relative",
"typescript.format.insertSpaceAfterOpeningAndBeforeClosingNonemptyBrackets": true,
I haven't started coding in typescript yet but when I do lll male a new config :)
Happy coding
I create a textarea with such parameters:
{
lineNumbers: true,
dragDrop: true,
mode: "htmlmixed",
theme: 'bespin',
autoCloseBrackets: true,
autoCloseTags: true,
matchBrackets: {
afterCursor: true,
maxScanLines: 10000,
maxScanLineLength: 100000
},
foldGutter: true,
gutters: ["CodeMirror-lint-markers", "CodeMirror-linenumbers", "CodeMirror-foldgutter"],
lint: true,
matchTags: {
bothTags: true
}
}
but the analysis is only for html.
Is it possible to make so that the linter analyzed html, css and js?
You can add the addon htmlmixed-lint.js from the codemiror based collaborative editor codepad.