Vue 2 - ESLint + 标准 + Prettier
Vue 2 - ESLint + Standard + Prettier
如何创建一个使用 ESLint + StandardJS + Prettier 的 Vue 2 项目?
StandardJS 的规则自然应该优先于 Prettier 的规则。
vue create 只提供以下选项:
- ESLint + 标准
- ESLint + Prettier
我尝试了两件事:
- 我混合了以上两个选项的eslint配置。它导致了依赖地狱,一旦解决了这个问题,它并没有像预期的那样真正工作。
- 我将 prettier-standard 包添加到我的 eslintrc.js,它也没有按预期工作。值得一提的是,prettier-standard 在命令行手动执行时效果很好。
我当然希望在项目配置级别而不是 IDE 级别进行设置。
你能试试我刚刚创建的这个 repo 吗?根据我的测试,它看起来运行良好。
https://github.com/kissu/so-eslint-standard-prettier-config
备注
- 我创建了 2 个项目并将
standard
一个的配置转储到 Prettier
一个,更改可以在 this commit 中看到
- CLI 的当前版本
@vue/eslint-config-standard
正在抛出错误 (Environment key "es2021" is unknown
),因为它需要 ESlint 7 才能工作,如 this changelog 所示
- 将 ESlint 升级到最新版本
7.29.0
,解决了问题
- 要检查项目的当前 ESlint 版本,您可以 运行
npx eslint --version
- 当然,你需要启用ESlint扩展并禁用Prettier one(如果使用VScode),否则可能会冲突
我试图从
中删除@vue/prettier
extends: ['plugin:vue/essential', 'eslint:recommended', '@vue/standard', '@vue/prettier']
看看它是否成功删除了任何 ;
并且它确实删除了!
错误确实来自 ESlint(如果我们删除 @vue/prettier
),并且只有在保存时(在 ESlint 服务器 + VScode 重启后)它们才会被 ESlint 修复!
把 Prettier
放回去当然没问题。
幸运的是,我有一台新 PC,因此有机会尝试 VScode 的全新配置。
我只需要安装 ESlint 并将这些设置放入我的 settings.json
{
"editor.codeActionsOnSave": {
"source.organizeImports": false,
"source.fixAll": true,
"source.fixAll.eslint": true,
"source.fixAll.stylelint": true
}
}
格式完美无缺,无需其他任何内容。
我有 eslint 7.8.1 和 Vue Prettier,我没有任何问题,也许你的 eslint 版本与 Prettier 不兼容或者你的 eslint 有一些错误?
我会以各种方式放置我的 eslint 配置,也许它会对你有所帮助!
module.exports = {
env: {
'browser': true,
'es6': true,
'node': true
},
parserOptions: {
'parser': 'babel-eslint'
},
extends: [
'@vue/standard',
'plugin:vue/recommended'
],
rules: {
"vue/html-indent": ["error", 4, {
"attribute": 1,
"closeBracket": 0,
"switchCase": 0,
"ignores": []
}],
"vue/max-attributes-per-line": [2, {
"singleline": 10,
"multiline": {
"max": 1,
"allowFirstLine": false
}
}],
'indent': ['error', 4],
'vue/component-name-in-template-casing': ['error', 'kebab-case'],
'vue/script-indent': [
'error',
4,
{ 'baseIndent': 1 }
],
'space-before-function-paren': ['error', 'never'],
'semi': [2, "never"],
'vue/singleline-html-element-content-newline': 'off',
'vue/multiline-html-element-content-newline': 'off'
},
overrides: [
{
'files': ['*.vue'],
'rules': {
'indent': 'off'
}
}
]
}
也许你忘记了 package.json 上的一些 devDependecies,那些是我的
"eslint": "^7.8.1",
"eslint-plugin-import": "^2.22.0",
"eslint-plugin-node": "^11.1.0",
"eslint-plugin-promise": "^4.2.1",
"eslint-plugin-standard": "^4.0.1",
"eslint-plugin-vue": "^6.2.2"
希望对您有所帮助!
如何创建一个使用 ESLint + StandardJS + Prettier 的 Vue 2 项目?
StandardJS 的规则自然应该优先于 Prettier 的规则。
vue create 只提供以下选项:
- ESLint + 标准
- ESLint + Prettier
我尝试了两件事:
- 我混合了以上两个选项的eslint配置。它导致了依赖地狱,一旦解决了这个问题,它并没有像预期的那样真正工作。
- 我将 prettier-standard 包添加到我的 eslintrc.js,它也没有按预期工作。值得一提的是,prettier-standard 在命令行手动执行时效果很好。
我当然希望在项目配置级别而不是 IDE 级别进行设置。
你能试试我刚刚创建的这个 repo 吗?根据我的测试,它看起来运行良好。
https://github.com/kissu/so-eslint-standard-prettier-config
备注
- 我创建了 2 个项目并将
standard
一个的配置转储到Prettier
一个,更改可以在 this commit 中看到
- CLI 的当前版本
@vue/eslint-config-standard
正在抛出错误 (Environment key "es2021" is unknown
),因为它需要 ESlint 7 才能工作,如 this changelog 所示
- 将 ESlint 升级到最新版本
7.29.0
,解决了问题 - 要检查项目的当前 ESlint 版本,您可以 运行
npx eslint --version
- 当然,你需要启用ESlint扩展并禁用Prettier one(如果使用VScode),否则可能会冲突
我试图从
中删除@vue/prettier
extends: ['plugin:vue/essential', 'eslint:recommended', '@vue/standard', '@vue/prettier']
看看它是否成功删除了任何 ;
并且它确实删除了!
错误确实来自 ESlint(如果我们删除 @vue/prettier
),并且只有在保存时(在 ESlint 服务器 + VScode 重启后)它们才会被 ESlint 修复!
把 Prettier
放回去当然没问题。
幸运的是,我有一台新 PC,因此有机会尝试 VScode 的全新配置。
我只需要安装 ESlint 并将这些设置放入我的 settings.json
{
"editor.codeActionsOnSave": {
"source.organizeImports": false,
"source.fixAll": true,
"source.fixAll.eslint": true,
"source.fixAll.stylelint": true
}
}
格式完美无缺,无需其他任何内容。
我有 eslint 7.8.1 和 Vue Prettier,我没有任何问题,也许你的 eslint 版本与 Prettier 不兼容或者你的 eslint 有一些错误?
我会以各种方式放置我的 eslint 配置,也许它会对你有所帮助!
module.exports = {
env: {
'browser': true,
'es6': true,
'node': true
},
parserOptions: {
'parser': 'babel-eslint'
},
extends: [
'@vue/standard',
'plugin:vue/recommended'
],
rules: {
"vue/html-indent": ["error", 4, {
"attribute": 1,
"closeBracket": 0,
"switchCase": 0,
"ignores": []
}],
"vue/max-attributes-per-line": [2, {
"singleline": 10,
"multiline": {
"max": 1,
"allowFirstLine": false
}
}],
'indent': ['error', 4],
'vue/component-name-in-template-casing': ['error', 'kebab-case'],
'vue/script-indent': [
'error',
4,
{ 'baseIndent': 1 }
],
'space-before-function-paren': ['error', 'never'],
'semi': [2, "never"],
'vue/singleline-html-element-content-newline': 'off',
'vue/multiline-html-element-content-newline': 'off'
},
overrides: [
{
'files': ['*.vue'],
'rules': {
'indent': 'off'
}
}
]
}
也许你忘记了 package.json 上的一些 devDependecies,那些是我的
"eslint": "^7.8.1",
"eslint-plugin-import": "^2.22.0",
"eslint-plugin-node": "^11.1.0",
"eslint-plugin-promise": "^4.2.1",
"eslint-plugin-standard": "^4.0.1",
"eslint-plugin-vue": "^6.2.2"
希望对您有所帮助!