Webstorm+vue+eslint+prettier融合问题
前言
跟着此文章步骤一点点走下去不一定完全就没问题了,因为都是一点点调出来的的,根本不知道哪些地方改了就没问题,哪些地方改了就有问题了。
那么使用WebStorm存在的问题是:
在webstorm中,调用快捷键格式化,和保存后自动格式化代码的规则不一致,需要调试。
这是一个很简单的问题,也是一个很难受的问题。
根据prettier官方文档Integrating with Linters · Prettier
使用eslint-config-prettier
在.eslintrc.json
配置:
"extends": [
"prettier"
]
这样eslint与prettier冲突的规则会被关闭(官网: "extends": ["prettier"] enables the config from eslint-config-prettier, which turns off some ESLint rules that conflict with Prettier. )
总结
反正经过一段时间调试,终于在webstorm中实现快捷键和保存格式,代码风格也一致的效果了:
1、安装
yarn add eslint-config-prettier -D
yarn add vue-eslint-parser -D
yarn add prettier -D
# 大概要安装以下:
yarn add @typescript-eslint/eslint-plugin @typescript-eslint/parser eslint-plugin-prettier eslint-config-prettier eslint eslint-plugin-vue -D
2、配置.eslintrc.json
"extends": [
"prettier"
],
完整配置参考:
{
"root": true,
"env": {
"es2021": true,
"node": true,
"browser": true
},
"globals": {
"node": true
},
"extends": [
// "plugin:vue/essential",
/** @see https://github.com/typescript-eslint/typescript-eslint/tree/master/packages/eslint-plugin#recommended-configs */
// "plugin:@typescript-eslint/recommended",
"eslint:recommended",
"plugin:vue/vue3-recommended",
//避免与 prettier 冲突
"plugin:prettier/recommended"
],
"parser": "vue-eslint-parser",
"parserOptions": {
"parser": "@typescript-eslint/parser",
"vueFeatures": {
// "filter": true,
"interpolationAsNonHTML": false,
"styleCSSVariableInjection": true
}
},
"plugins": ["@typescript-eslint"],
"ignorePatterns": ["types/env.d.ts", "node_modules/**", "**/dist/**"],
"rules": {
"@typescript-eslint/no-unused-vars": "error",
"@typescript-eslint/no-var-requires": "off",
"@typescript-eslint/consistent-type-imports": "error",
"@typescript-eslint/explicit-module-boundary-types": "off",
// "space-before-blocks": "warn",
// "space-before-function-paren": "error",
// "space-in-parens": "warn",
// "no-whitespace-before-property": "off",
/**
* Having a semicolon helps the optimizer interpret your code correctly.
* This avoids rare errors in optimized code.
* @see https://twitter.com/alex_kozack/status/1364210394328408066
*/
"semi": ["error", "always"],
/**
* This will make the history of changes in the hit a little cleaner
*/
"comma-dangle": ["warn", "always-multiline"]
}
}
注意:我的webstorm版本是2021.1,如果你是低于这个版本的,特别是2020.1之前的,因为2020.1之前,webstorm需要手动安装prettier插件
.editorconfig
root = true
[*]
charset = utf-8
end_of_line = lf
indent_size = 2
indent_style = space
insert_final_newline = true
ij_html_quote_style = double
max_line_length = 120
tab_width = 2
trim_trailing_whitespace = true
[*.sass]
indent_size = 2
[*.scss]
indent_size = 2
[*.vue]
indent_size = 2
tab_width = 2
[{*.ats,*.ts}]
indent_size = 2
tab_width = 2
[{*.cjs,*.js}]
indent_size = 2
tab_width = 2
[{*.har,*.jsb2,*.jsb3,*.json,.babelrc,.eslintrc,.prettierrc,.stylelintrc,bowerrc,jest.config}]
indent_size = 2
[{*.htm,*.html,*.ng,*.sht,*.shtm,*.shtml}]
indent_size = 2
tab_width = 2
prettier
{
"printWidth": 100,
"tabWidth": 2,
"useTabs": false,
"semi": true,
"vueIndentScriptAndStyle": true,
"singleQuote": true,
"quoteProps": "as-needed",
"bracketSpacing": true,
"trailingComma": "es5",
"jsxBracketSameLine": true,
"jsxSingleQuote": false,
"arrowParens": "always",
"insertPragma": false,
"requirePragma": false,
"proseWrap": "never",
"htmlWhitespaceSensitivity": "ignore",
"endOfLine": "lf",
"rangeStart": 0
}
html引号问题
在.vue
模板中,script我喜欢用单引号,但是在template中喜欢双引号,但是每次使用快捷键格式化时,都会把template变成单引号,如果上面的配置没解决问题
那么修改.idea/codeStyles/codeStyleConfig.xml
文件,
<HTMLCodeStyleSettings>
<option name="HTML_SPACE_INSIDE_EMPTY_TAG" value="true" />
<option name="HTML_QUOTE_STYLE" value="Single" />
<option name="HTML_ENFORCE_QUOTES" value="true" />
</HTMLCodeStyleSettings>
如果其中有Single,那么去掉这行
webstorm设置问题
这个问题也很关键:
1、eslint
2、快捷键问题
3、apply问题
有时候设置半天,会发现没【应用】设置

