0
359
ViewsCómo agregar reglas de eslint a más bonitas en el proyecto Vue en VsCode
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
1 answers
Answer question0
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.
más bonita
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.
