介绍

ESLint 是用来保持代码规范的

Prettier 是十分受欢迎的代码格式化工具

两者结合起来，可以轻松地格式化代码，规范代码。具体步骤如下：安装依赖

npm install --save-dev babel-eslint eslint eslint-config-prettier eslint-loader eslint-plugin-vue eslint-plugin-prettier prettier

2. 在项目的根目录下，配置 .eslintrc.js 文件，如下所示：

module.exports = {

root: true,

env: {

browser: true,

node: true

},

parserOptions: {

parser: 'babel-eslint'

},

extends: [

'eslint:recommended',

// https://github.com/vuejs/eslint-plugin-vue#priority-a-essential-error-prevention

// consider switching to `plugin:vue/strongly-recommended` or `plugin:vue/recommended` for stricter rules.

'plugin:vue/recommended',

'plugin:prettier/recommended'

],

// required to lint *.vue files

plugins: ['vue'],

// add your custom rules here

rules: {

semi: [2, 'never'],

'no-console': 'off',

'vue/max-attributes-per-line': 'off',

'prettier/prettier': ['error', { semi: false }]

}

}

3. 在 package.json 文件中添加 lint 和 lintfix命令

"scripts": {

"lint": "eslint --ext .js,.vue --ignore-path .gitignore .",

"lintfix": "eslint --fix --ext .js,.vue --ignore-path .gitignore ."

}

现在你可以运行 lint 命令检查代码中的规范

npm run lint

运行 lintfix 命令修复代码中的不规范的地方

npm run lintfix

如果你想在运行 npm run dev 命令的过程中，也可以动态检查代码中的规范，可以在nuxt.config.js 配置文件中，填入以下内容

...

/*

** Build configuration

*/

build: {

/*

** You can extend webpack config here

*/

extend(config, ctx) {

// Run ESLint on save

if (ctx.isDev && ctx.isClient) {

config.module.rules.push({

enforce: "pre",

test: /\.(js|vue)$/,

loader: "eslint-loader",

exclude: /(node_modules)/

})

}

}

}

现在在你编写的过程中就可以动态地检查代码规范了！