文章目录
- ESLint
- 创建 Vue 项目
- 安装 ESLint
- 配置 WebStrom
- 添加 ESLint 配置文件
- .eslintignore
- .eslintrc.js
- 格式化代码快捷键
- 右键格式化
- 快捷键格式化
ESLint
ESLint最初是由Nicholas C. Zakas 于2013年6月创建的开源项目。它的目标是提供一个插件化的javascript代码检测工具。
在一个 Vue 项目中要使用 ESLint 工具，首先需要安装 Vue，并创建一个简单的 Vue 项目，而后在 Vue 项目的基础上安装 ESLint 依赖，最后进行 ESLint 的相关配置。
创建 Vue 项目
1、使用 npm 安装 Vue3 的最新版本。
npm install vue@next2、安装最新版本的 Vue-cli 脚手架模板。
npm install -g @vue/cli@next3、使用 Vite 构建项目。
npm init vite-app <project-name>
cd <project-name>
npm install
npm run dev安装 ESLint
我们可以使用 npm 命令安装 ESLint，一共需要安装三个 ESLint 项目的依赖，本地安装和全局安装任选一个即可。
- 本地安装
npm install eslint --save-dev
npm install eslint-plugin-vue --save-dev
npm install babel-eslint --save-dev- 全局安装
npm install -g eslint
npm install -g eslint-plugin-vue
npm install -g babel-eslint配置 WebStrom
在 Vue 项目中安装完 ESLint 依赖，还需要对 WebStrom 进行配置。
打开 File -> Settings -> Languages & Frameworks -> JavaScript -> Code Quality Tools -> ESLint
界面如下：
最后，点击界面右下角的 Apply 按钮，应用该配置即可。
添加 ESLint 配置文件
在没有 ESLint 配置文件的情况下，会使用默认的代码风格配置进行检查，我们可以给项目增加 ESLint 的配置文件来对项目进行代码风格配置，变成自己适应的代码风格。
- 在项目的顶级目录下新增
.eslintrc.js和.eslintignore文件，其中.eslintrc.js文件是 ESLint 的代码风格配置文件，而.eslintignore文件，则是忽略 ESLint 代码风格检查的文件的名称或路径的配置文件。
.eslintignore
build/*.js
src/assets
public
dist.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/max-attributes-per-line': [2, {
'singleline': 10,
'multiline': {
'max': 5,
'allowFirstLine': true
}
}],
'vue/singleline-html-element-content-newline': 'off',
'vue/multiline-html-element-content-newline': 'off',
'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': ['error', 'always', { 'null': 'ignore' }],
'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-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': [2, {
'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': [2, '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': process.env.NODE_ENV === 'production' ? 2 : 0,
'object-curly-spacing': [2, 'always', {
objectsInObjects: false
}],
'array-bracket-spacing': [2, 'never']
}
}格式化代码快捷键
在配置完 ESLint 代码风格检查工具之后，我们可以直接格式化代码，使得我们的前端代码自动格式化为 ESLint 的所配置的代码风格。
右键格式化
在需要格式化的文件中点击鼠标右键，可以看到右键菜单中有一个 Fix ESLint Problems 的选项，点击该选项，即可格式化该文件的全部代码。
快捷键格式化
右键菜单的方法毕竟还是比较繁琐的，我们还可以通过配置快捷键的方式，直接使用快捷键对文件代码进行格式化操作。
打开 File -> Settings -> Keymap
