vuejs2 - 具有 4 个空格标识的 Vue-CLI
问题描述
我对 Vue 完全陌生。
我想使用 CLI,并且想要 4 个空格缩进(使用 typescript 和 vuex)。但是经过 24 小时的挣扎,我离让任何事情都更近了一步。如果不可能,也请告诉我。
我认为 tslint 是要走的路,但找不到解决方案。所以我尝试了 eslint 并将其添加到 package.json
"devDependencies": {
"@vue/cli-plugin-eslint": "^3.0.4",
"@vue/cli-plugin-pwa": "^3.0.4",
"@vue/cli-plugin-typescript": "^3.0.4",
"@vue/cli-service": "^3.0.4",
"@vue/eslint-config-prettier": "^3.0.4",
"@vue/eslint-config-typescript": "^3.0.4",
"eslint": "^5.6.1",
"eslint-plugin-vue": "^5.0.0-beta.3", // <------------------
"typescript": "^3.0.0",
"vue-template-compiler": "^2.5.17"
}
然后是 eslintrc 我有
module.exports = {
root: true,
env: {
node: true
},
extends: ["plugin:vue/essential", "@vue/prettier", "@vue/typescript"],
rules: {
"no-console": process.env.NODE_ENV === "production" ? "error" : "off",
"no-debugger": process.env.NODE_ENV === "production" ? "error" : "off",
"vue/script-indent": ["error", 4, { baseIndent: 1 }],
indent: ["error", 4]
},
parserOptions: {
parser: "typescript-eslint-parser"
}
};
然后当我跑
$ npx eslint --fix *.js
=============
WARNING: You are currently running a version of TypeScript which is not officially supported by typescript-eslint-parser.
You may find that it works just fine, or you may not.
SUPPORTED TYPESCRIPT VERSIONS: ~3.0.1
YOUR TYPESCRIPT VERSION: 3.1.1
Please only submit bug reports when using the officially supported version.
=============
/Users/x/code/sync/vue/restos2/postcss.config.js
2:1 error Expected indentation of 4 spaces but found 2 indent
3:1 error Expected indentation of 8 spaces but found 4 indent
4:1 error Expected indentation of 4 spaces but found 2 indent
✖ 3 problems (3 errors, 0 warnings)
3 errors and 0 warnings potentially fixable with the `--fix` option.
but the problem is that no files ever get changed.
解决方案
如 tslint 文档中所述,缩进规则不会修复错误的缩进字符数量,它只修复字符类型,这意味着它可以将制表符转换为空格,反之亦然,但它没有将 4 个空格修复为 2 个空格
注意:自动修复只会将无效的缩进空白转换为所需的类型,它不会修复无效的空白大小。
https://palantir.github.io/tslint/rules/indent/
所以,是的,你必须使用 eslint。我没有看到完整的 eslintrc 文件,但我认为主要问题可能是这一行:indent: ["error", 4]
. 尝试删除它。
这个 eslint 配置对我有用:
{
"root": true,
"env": {
"node": true
},
"extends": [
"plugin:vue/essential",
"eslint:recommended",
"@vue/typescript"
],
"rules": {
"vue/script-indent": ["error",2,{"baseIndent": 1}]
},
"parserOptions": {
"parser": "typescript-eslint-parser"
}
}
并运行npm run lint
推荐阅读
- python - Python 列表理解:for 和 if 语句?
- python - 如何从一行带有整数的文本制作字典?
- javascript - 如何在 Chrome 扩展中使用 Javascript 触发 HTML 元素文本的更改事件?
- javascript - Nuxtjs:如何将 HttpOnly Cookies 用于 Nuxt-Auth 策略
- java - Java - JNA - User32.INSTANCE.GetLayeredWindowAttributes 返回错误的透明度值
- python - python pandas histogram 显示 qcut 的分箱范围
- java - 如何根据一组随机生成的字母验证输入。还有,如何建立查房系统
- javascript - 在事件中反应颜色背景
- javascript - 为每 3 个项目 Vue.js 创建新行
- android - Opengl es 2.0片段着色器中有没有办法获得以前的片段颜色