I used vue + eslint + prettier and for longer html class="" attributes prettier was splitting it into several line.
split class
Now prettier just puts it in single line and not splits long classes. single line class
When working with tailwindcss it's not efficient for me. I was not able to reset this functionality can anyone help me or is this feature fully removed from prettier?
My prettierrc file: "
{
"printWidth": 80,
"semi": false,
"singleQuote": true,
"trailingComma": "es5",
"useTabs": true,
"tabWidth": 2
}
My settings.json:
{"editor.formatOnSave": true,
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
},
"eslint.validate": [
"javascript",
"javascriptreact",
"vue"
],
"[vue]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[html]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[javascript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[typescript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},}
Related
I've got a dependency I'd like to shim on my react-native project. I currently have the following code on my babel.config.js file:
module.exports = function (api) {
api.cache(true);
return {
presets: ['babel-preset-expo'],
plugins: [
],
};
};
I've found the extension babel-plugin-module-resolver which seems to be helpful (any other alternative would work too) and tried to follow their examples but they didn't work
I've tried the following:
module.exports = function (api) {
api.cache(true);
return {
presets: ['babel-preset-expo'],
plugins: [
[
'module-resolver',
{
root: ["./src"],
alias: {
'#dependency/to-shim': 'path/to-shimmer',
},
},
],
],
};
};
but that doesn't work
I've got the same error.
The code when running works correctly.
The problem is with build. The path still absolute.
babel.config.js
module.exports = {
presets: ['module:metro-react-native-babel-preset'],
plugins: [
[
'module-resolver',
{
root: ['.'],
alias: {
'#services': './src/services',
},
},
],
'react-native-reanimated/plugin',
],
};
tsconfig.json
{
"compilerOptions": {
"baseUrl": ".",
"paths": {
"#services*": ["./src/services"]
},
"allowUnreachableCode": false,
"allowUnusedLabels": false,
"esModuleInterop": true,
"importsNotUsedAsValues": "error",
"forceConsistentCasingInFileNames": true,
"jsx": "react",
"lib": ["esnext"],
"moduleResolution": "node",
"noFallthroughCasesInSwitch": true,
"noImplicitReturns": true,
"noImplicitUseStrict": false,
"noStrictGenericChecks": false,
"noUnusedLocals": true,
"noUnusedParameters": true,
"resolveJsonModule": true,
"skipLibCheck": true,
"strict": false,
"target": "esnext"
},
"include": ["src"],
"exclude": [
"node_modules",
"commitlint.config.js",
"metro.config.js",
"jest.config.js",
"babel.config.js"
]
}
screenshot - should be relative after build
I had
these settings for my VSCode
settings.json
{
"workbench.sideBar.location": "left",
"window.zoomLevel": 1,
"workbench.colorTheme": "Monokai Pro",
"workbench.iconTheme": "Monokai Pro Icons",
"editor.formatOnSave": true,
"editor.renderWhitespace": "none",
"breadcrumbs.enabled": true,
"editor.minimap.enabled": false,
"prettier.tabWidth": 4,
"prettier.vueIndentScriptAndStyle": true,
"prettier.useTabs": true,
"prettier.configPath": "/Users/alpha/Sites/notes/VSCode/.prettierrc",
"[javascript, vue]": {
"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.formatOnSave": true
},
"redhat.telemetry.enabled": true,
"liveServer.settings.donotShowInfoMsg": true,
"explorer.confirmDelete": false,
"editor.tabSize": 4,
"emmet.includeLanguages": {
"javascript": "javascriptreact",
"vue-html": "html",
"vue": "html"
}
}
.prettierrc
{
"semi": false,
"singleQuote": false,
"useTabs": true,
"trailingComma": "none",
"printWidth": 80,
"tabWidth": 4
}
Right now, it prettifies on save for JS & HTML, perfectly. ✨
I want
to make it works with Vue.js.
I tried
add vue --> "[javascript, vue]":
It is not working.
How would one do that do Vue.js ?
Adding this block of codes to my main settings seems to work.
"[vue]": {
"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.formatOnSave": true
},
Final settings
{
"workbench.sideBar.location": "left",
"window.zoomLevel": 1,
"workbench.colorTheme": "Monokai Pro",
"workbench.iconTheme": "Monokai Pro Icons",
"editor.formatOnSave": true,
"editor.renderWhitespace": "none",
"breadcrumbs.enabled": true,
"editor.minimap.enabled": false,
"prettier.tabWidth": 4,
"prettier.vueIndentScriptAndStyle": true,
"prettier.useTabs": true,
"prettier.configPath": "/Users/alpha/Sites/notes/VSCode/.prettierrc",
"[javascript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.formatOnSave": true
},
"[vue]": {
"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.formatOnSave": true
},
"redhat.telemetry.enabled": true,
"liveServer.settings.donotShowInfoMsg": true,
"explorer.confirmDelete": false,
"editor.tabSize": 4,
"emmet.includeLanguages": {
"javascript": "javascriptreact",
"vue-html": "html",
"vue": "html"
}
}
Note: I am not sure if what I did is the right way to do it, but it is working for now.
I'm using prettier to lint and fix my formatting of .sol files.
But for some reason, anytime it encounters pragma experimental ABIEncoderV2;, it transforms it to pragma experimental ;.
Why's it doing this?
My .prettierrc.js:
module.exports = {
overrides: [
{
files: "*.sol",
options: {
bracketSpacing: false,
printWidth: 145,
tabWidth: 4,
useTabs: false,
singleQuote: false,
explicitTypes: "always",
},
},
{
files: "*.ts",
options: {
printWidth: 145,
semi: false,
trailingComma: "es5",
},
},
],
};
I have set a react-native project with the cli. It works, but I have a very anoying eslint error:
Strings must use singlequote.eslint(quotes)
I have tried to write this:
module.exports = {
root: true,
extends: "#react-native-community",
rules: {
avoidEscape: true,
allowTemplateLiterals: true,
},
};
I also tried to create my own config:
module.exports = {
globals: {
Atomics: "readonly",
SharedArrayBuffer: "readonly",
},
parser: "#typescript-eslint/parser",
extends: ["#react-native-community"],
parserOptions: {
ecmaVersion: 2018,
sourceType: "module",
ecmaFeatures: {
jsx: true,
},
},
plugins: ["react", "react-hooks"],
rules: {
avoidEscape: true,
allowTemplateLiterals: true,
},
settings: {
react: {
version: "detect",
},
},
"sort-imports": [
"error",
{
ignoreCase: false,
ignoreDeclarationSort: false,
ignoreMemberSort: false,
memberSyntaxSortOrder: ["none", "all", "multiple", "single"],
},
],
};
Nothing works. How to remove this rule?
You can turn off any specific rule like so:
{
"rules": {
"quotes": "off"
}
}
Prettier VS Code extension doesn't work properly with .vue. I mean how to setup prettier to integrate it with eslint and format .vue files on Cmd+Shift+P -> Format Document. .eslintrc.js:
module.exports = {
root: true,
env: {
browser: true,
},
extends: [
'plugin:vue/essential',
'standard'
],
plugins: [
'vue'
]
}
You need to define those rules in your .eslintrc.js file like this:
module.exports = {
root: true,
env: {
node: true
},
extends: ["plugin:vue/essential", "#vue/prettier"],
rules: {
"no-console": process.env.NODE_ENV === "production" ? "error" : "off",
"no-debugger": process.env.NODE_ENV === "production" ? "error" : "off",
"prettier/prettier": [
"warn",
{
"singleQuote": true,
"semi": false,
"trailingComma": "none"
}
]
},
parserOptions: {
parser: "babel-eslint"
}
};
Easier is to install vetur octref.vetur extension and then add a .vscode>settings.json with following
{
"editor.defaultFormatter": "octref.vetur",
"vetur.format.defaultFormatter.html": "prettier",
"vetur.format.defaultFormatter.css": "prettier",
"vetur.format.defaultFormatter.postcss": "prettier",
"vetur.format.defaultFormatter.scss": "prettier",
"vetur.format.defaultFormatter.less": "prettier",
"vetur.format.defaultFormatter.stylus": "stylus-supremacy",
"vetur.format.defaultFormatter.js": "prettier",
"vetur.format.defaultFormatter.ts": "prettier"
}
you can add .prettierrc.json file in the root directory, and
{
"singleQuote": true,
"tabWidth": 2,
"semi": false
}
./.prettierr.js (file in root folder, that is)
module.exports = {
//your rules here
trailingComma: 'none',
tabWidth: 2,
singleQuote: true,
semi: false
}