[英]How to add eslint rules to prettier in Vue project on VsCode
I would like to add rules to my existing formating rules我想将规则添加到我现有的格式规则中
Actually I'm using a .vscode/settings.json
file with the following实际上,我使用的是
.vscode/settings.json
文件,其中包含以下内容
{
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
},
"eslint.validate": ["javascript"],
"vetur.useWorkspaceDependencies": true,
"vetur.validation.style": false,
"vetur.format.defaultFormatter.scss": "prettier",
"vetur.format.defaultFormatter.css": "prettier",
"vetur.format.defaultFormatter.js": "prettier-eslint",
"vetur.format.defaultFormatter.html": "prettier",
"[vue]": {
"editor.formatOnSave": true,
"editor.defaultFormatter": "octref.vetur",
},
"eslint.format.enable": true
}
It works well but let's say i want to add a rule for exemple vue-script-indent它运作良好,但假设我想为示例vue-script-indent添加规则
I don't know how to add this rules to my existing config我不知道如何将此规则添加到我现有的配置中
vue/script-indent
(ESLint rule) vue/script-indent
(ESLint 规则) From the eslint-plugin-vue
docs :来自
eslint-plugin-vue
文档:
Create
.eslintrc.*
file to configure rules.创建
.eslintrc.*
文件来配置规则。 See also: http://eslint.org/docs/user-guide/configuring .另请参阅: http://eslint.org/docs/user-guide/configuring 。
Example .eslintrc.js :
示例.eslintrc.js :
module.exports = { extends: [ // add more generic rulesets here, such as: // 'eslint:recommended', 'plugin:vue/essential' ], rules: { // override/add rules settings here, such as: // 'vue/no-unused-vars': 'error' } }
So in your .eslintrc.js
, add the script-indent
rule to the rules
property.因此,在您的
.eslintrc.js
中,将script-indent
规则添加到rules
属性中。 Note the eslint-plugin-vue
rule names are all prefixed with vue/
, so use "vue/script-indent"
in the rules
property below:请注意
eslint-plugin-vue
规则名称都以vue/
为前缀,因此在下面的rules
属性中使用"vue/script-indent"
:
module.exports = {
extends: [
'plugin:vue/essential',
],
rules: {
'vue/script-indent': ['error', 2, {
baseIndent: 0,
switchCase: 0,
ignores: []
}]
}
}
Finally, ensure you have the ESLint VS Code extension installed to enable formatting from the IDE.最后,确保安装了ESLint VS Code 扩展以启用来自 IDE 的格式化。
Your workspace settings point to Prettier, so make sure your Prettier options align with the vue/script-indent
rule.您的工作区设置指向 Prettier,因此请确保您的 Prettier 选项符合
vue/script-indent
规则。 That is, the tabWidth
value in Prettier should match the tab width in vue/script-indent
.也就是说,Prettier 中的
tabWidth
值应该与vue/script-indent
中的制表符宽度匹配。
For example, to require a 4-space tab width, create .prettierrc
in the root of your project with the following JSON:例如,要要求 4 个空格的制表符宽度,请使用以下 JSON 在项目的根目录中创建
.prettierrc
:
// .prettierrc
{ 👇
"tabWidth": 4
}
...and update .eslintrc.js
to match: ...并更新
.eslintrc.js
以匹配:
// .eslintrc.js
module.exports = {
rules: { 👇
'vue/script-indent': ['error', 4, {
baseIndent: 0,
switchCase: 0,
ignores: []
}]
}
}
Also ensure you have the Prettier VS Code extension installed to enable formatting from the IDE.还要确保安装了 Prettier VS Code 扩展以启用来自 IDE 的格式化。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.