webstorm配置eslint一键格式化代码的方法详解

1、安装eslint插件：npm install –save-dev eslint-config-vue eslint-plugin-vue

2、创建eslintrc.js文件，添加相关代码规范（根据自己喜好进行调整）

module.exports = {
root: true,
parserOptions: {
parser: \’babel-eslint\’,
sourceType: \’module\’
},
env: {
browser: true,
node: true,
es6: true
},
extends: [\’plugin:vue/recommended\’, \’eslint:recommended\’],

// add your custom rules here
// it is base on https://github.com/vuejs/eslint-config-vue
rules: {
\’vue/attribute-hyphenation\’: \’off\’,
\’vue/no-mutating-props\’: \’off\’,
\’vue/require-prop-types\’: \’off\’,
\’vue/html-self-closing\’: [
\’error\’,
{
html: {
void: \’any\’,
normal: \’any\’,
component: \’always\’
},
svg: \’always\’,
math: \’always\’
}
],
\’vue/max-attributes-per-line\’: [
2,
{
singleline: 2,
multiline: {
max: 2,
allowFirstLine: false
}
}
],
\’vue/singleline-html-element-content-newline\’: \’off\’,
\’vue/multiline-html-element-content-newline\’: \’error\’,
\’vue/name-property-casing\’: [\’error\’, \’PascalCase\’],
\’vue/no-v-html\’: \’off\’,
\’accessor-pairs\’: 2,
\’arrow-spacing\’: [
2,
{
before: true,
after: true
}
],
\’block-spacing\’: [2, \’always\’],
\’brace-style\’: [
2,
\’1tbs\’,
{
allowSingleLine: true
}
],
camelcase: [
0,
{
properties: \’always\’
}
],
\’comma-dangle\’: [2, \’never\’],
\’comma-spacing\’: [
2,
{
before: false,
after: true
}
],
\’comma-style\’: [2, \’last\’],
\’constructor-super\’: 2,
curly: [2, \’multi-line\’],
\’dot-location\’: [2, \’property\’],
\’eol-last\’: 2,
eqeqeq: \’off\’,
\’generator-star-spacing\’: [
2,
{
before: true,
after: true
}
],
\’handle-callback-err\’: [2, \’^(err|error)$\’],
indent: [
2,
2,
{
SwitchCase: 1
}
],
\’jsx-quotes\’: [2, \’prefer-single\’],
\’key-spacing\’: [
2,
{
beforeColon: false,
afterColon: true
}
],
\’keyword-spacing\’: [
2,
{
before: true,
after: true
}
],
\’new-cap\’: [
2,
{
newIsCap: true,
capIsNew: false
}
],
\’new-parens\’: 2,
\’no-array-constructor\’: 2,
\’no-caller\’: 2,
\’no-case-declarations\’: \’off\’,
\’no-console\’: \’off\’,
\’no-class-assign\’: 2,
\’no-cond-assign\’: 2,
\’no-const-assign\’: 2,
\’no-control-regex\’: 0,
\’no-delete-var\’: 2,
\’no-dupe-args\’: 2,
\’no-dupe-class-members\’: 2,
\’no-dupe-keys\’: 2,
\’no-duplicate-case\’: 2,
\’no-empty-character-class\’: 2,
\’no-empty-pattern\’: 2,
\’no-eval\’: 2,
\’no-ex-assign\’: 2,
\’no-extend-native\’: 2,
\’no-extra-bind\’: 2,
\’no-extra-boolean-cast\’: 2,
\’no-extra-parens\’: [2, \’functions\’],
\’no-fallthrough\’: 2,
\’no-floating-decimal\’: 2,
\’no-func-assign\’: 2,
\’no-implied-eval\’: 2,
\’no-inner-declarations\’: [2, \’functions\’],
\’no-invalid-regexp\’: 2,
\’no-irregular-whitespace\’: 2,
\’no-iterator\’: 2,
\’no-label-var\’: 2,
\’no-labels\’: [
2,
{
allowLoop: false,
allowSwitch: false
}
],
\’no-lone-blocks\’: 2,
\’no-mixed-spaces-and-tabs\’: 2,
\’no-multi-spaces\’: 2,
\’no-multi-str\’: 2,
\’no-multiple-empty-lines\’: [
2,
{
max: 1
}
],
\’no-native-reassign\’: 2,
\’no-negated-in-lhs\’: 2,
\’no-new-object\’: 2,
\’no-new-require\’: 2,
\’no-new-symbol\’: 2,
\’no-new-wrappers\’: 2,
\’no-obj-calls\’: 2,
\’no-octal\’: 2,
\’no-octal-escape\’: 2,
\’no-path-concat\’: 2,
\’no-proto\’: 2,
\’no-redeclare\’: 2,
\’no-regex-spaces\’: 2,
\’no-return-assign\’: [2, \’except-parens\’],
\’no-self-assign\’: 2,
\’no-self-compare\’: 2,
\’no-sequences\’: 2,
\’no-shadow-restricted-names\’: 2,
\’no-spaced-func\’: 2,
\’no-sparse-arrays\’: 2,
\’no-this-before-super\’: 2,
\’no-throw-literal\’: 2,
\’no-trailing-spaces\’: 2,
\’no-undef\’: 2,
\’no-undef-init\’: 2,
\’no-unexpected-multiline\’: 2,
\’no-unmodified-loop-condition\’: 2,
\’no-unneeded-ternary\’: [
2,
{
defaultAssignment: false
}
],
\’no-unreachable\’: 2,
\’no-unsafe-finally\’: 2,
\’no-unused-vars\’: [
1,
{
vars: \’all\’,
args: \’none\’
}
],
\’no-useless-call\’: 2,
\’no-useless-computed-key\’: 2,
\’no-useless-constructor\’: 2,
\’no-useless-escape\’: 0,
\’no-whitespace-before-property\’: 2,
\’no-with\’: 2,
\’one-var\’: [
2,
{
initialized: \’never\’
}
],
\’operator-linebreak\’: [
2,
\’after\’,
{
overrides: {
\’?\’: \’before\’,
\’:\’: \’before\’
}
}
],
\’padded-blocks\’: [2, \’never\’],
quotes: [
2,
\’single\’,
{
avoidEscape: true,
allowTemplateLiterals: true
}
],
semi: [2, \’never\’],
\’semi-spacing\’: [
2,
{
before: false,
after: true
}
],
\’space-before-blocks\’: [2, \’always\’],
\’space-before-function-paren\’: [0, \’never\’],
\’space-in-parens\’: [2, \’never\’],
\’space-infix-ops\’: 2,
\’space-unary-ops\’: [
2,
{
words: true,
nonwords: false
}
],
\’spaced-comment\’: [
2,
\’always\’,
{
markers: [\’global\’, \’globals\’, \’eslint\’, \’eslint-disable\’, \’*package\’, \’!\’, \’,\’]
}
],
\’template-curly-spacing\’: [2, \’never\’],
\’use-isnan\’: 2,
\’valid-typeof\’: 2,
\’wrap-iife\’: [2, \’any\’],
\’yield-star-spacing\’: [2, \’both\’],
yoda: [2, \’never\’],
\’prefer-const\’: 2,
\’no-debugger\’: 0,
\’object-curly-spacing\’: [
2,
\’always\’,
{
objectsInObjects: false
}
],
\’array-bracket-spacing\’: [2, \’never\’]
}
}

3、webstorm进行快捷键设置

4、这样在页面使用Alt + S，即可一键格式化代码了

附：处理低版本webStorm右键没有Fix Eslint Problems的问题

webstorm的版本过低，配置了eslint后，右键.vue文件却不会出现Fix Eslint Problems选项，如果我们希望自动修复.vue文件中的js代码，只能在命令行里操作，并且需要为eslint命令指定文件所在目录以及文件名，或者cd到文件所在目录执行，如eslint –fix ‘src/pages/home.vue’；每次要修复时，都要这样写，显然不能接受。

那么我们需要自定义代码修复工具：

（一）配置Webstorm的Tools

打开settings -> Tools -> External Tools，点击添加按钮，做下图的配置：

ProjectFileDir 指工程所在目录。

2.FilePathRelativeToProjectRoot 指文件相对于工程所在的路径。