具有 4 个空格标识的 Vue-CLI

Question

我是 Vue 的新手。

我想使用 CLI，我想有 4 个空格缩进(使用打字稿和 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.

Answer 1

如 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一起运行