Me gustaría agregar reglas a mis reglas de formato existentes
En realidad, estoy usando un archivo .vscode/settings.json
con lo siguiente
{ "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 }
Funciona bien, pero digamos que quiero agregar una regla para, por ejemplo , vue-script-indent
No sé cómo agregar estas reglas a mi configuración existente
vue/script-indent
(regla ESLint) De los eslint-plugin-vue
:
Cree el archivo
.eslintrc.*
para configurar las reglas. Consulte también: http://eslint.org/docs/user-guide/configuring .Ejemplo .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' } }
Entonces, en su .eslintrc.js
, agregue la regla script-indent
a la propiedad de rules
. Tenga en cuenta que los nombres de las eslint-plugin-vue
tienen el prefijo vue/
, así que use "vue/script-indent"
en la propiedad de rules
a continuación:
module.exports = { extends: [ 'plugin:vue/essential', ], rules: { 'vue/script-indent': ['error', 2, { baseIndent: 0, switchCase: 0, ignores: [] }] } }
Finalmente, asegúrese de tener instalada la extensión ESLint VS Code para habilitar el formateo desde el IDE.
La configuración de su espacio de trabajo apunta a Prettier, así que asegúrese de que sus opciones de Prettier se alineen con la regla vue/script-indent
. Es decir, el valor tabWidth
en Prettier debe coincidir con el ancho de la pestaña en vue/script-indent
.
Por ejemplo, para requerir un ancho de tabulación de 4 espacios, cree .prettierrc
en la raíz de su proyecto con el siguiente JSON:
// .prettierrc { 👇 "tabWidth": 4 }
... y actualice .eslintrc.js
para que coincida:
// .eslintrc.js module.exports = { rules: { 👇 'vue/script-indent': ['error', 4, { baseIndent: 0, switchCase: 0, ignores: [] }] } }
También asegúrese de tener instalada la extensión Prettier VS Code para habilitar el formateo desde el IDE.