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
}
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 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"
}
}
In #vue/cli 4.0.5 app I want to add no-unused-vars errors(both in app and in phpstorm )
and I added this option in .eslintrc.js, which contains:
module.exports = {
root: true,
env: {
node: true
},
'extends': [
'plugin:vue/essential',
'eslint:recommended'
],
rules: {
'no-console': 'error',
'no-debugger': 'error',
"no-unused-vars": "error",
'no-undef': "error",
},
parserOptions: {
parser: 'babel-eslint'
}
}
But I di not see no-unused-vars errors event I restart yarn server.
Are there some other options ?
Thanks!
I don't know how your configurations are set, but you can always add the eslintConfig on package.json file, like this:
"eslintConfig": {
"root": true,
"env": {
"node": true
},
"rules": {
"no-unused-vars": "error"
}
}
I'm using this .eslintrc setup generated by the eslint --init command.
It offers me to chose the airbnb styleguide which is a good start to me
module.exports = {
env: {
browser: true,
es6: true,
},
rules: {
"react/state-in-constructor": [0, "never"],
"arrow-parens": 0
},
extends: [
'airbnb',
],
globals: {
Atomics: 'readonly',
SharedArrayBuffer: 'readonly',
},
parserOptions: {
ecmaFeatures: {
jsx: true,
},
ecmaVersion: 2018,
sourceType: 'module',
},
plugins: [
'react',
],
rules: {
"react/state-in-constructor": [0, "never"],
"arrow-parens": 0
},
};
However, afterwards, it seems like it is enforcing some rules that i don't want for now which are :
rules: {
"react/state-in-constructor": [0, "never"],
"arrow-parens": 0
},
But it is not taken in account by VSCode or Eslint command.
Someone faced this issue ?
Best regards,
Louis
In my pakcage.json , the generated config is
"eslintConfig": {
"root": true,
"env": {
"node": true
},
"extends": [
"plugin:vue/essential",
"#vue/standard"
],
"rules": {},
"parserOptions": {
"parser": "babel-eslint"
}
},
but then when I write in my vue.confgig.js :
const webpack = require('webpack')
module.exports = {
configureWebpack: {
devtool: ('mode' === 'test') ? 'inline-source-map' : false,
plugins: [
i get an error :
rror: Unexpected constant condition (no-constant-condition) at vue.config.js:5:15:
how should I write the rule in my package.json file ?
You receive this error because you are comparing 2 strings
'mode' === 'test'
this will never be true
you should instead propably be doing
process.env.NODE_ENV === 'test'