nuxt、Vue项目中配置ESLint和prettier来规范代码、格式代码eslint and prettier 1、

一、eslint and prettier

1、eslint来对代码进行质量检查、规范代码、可以一定程度上的统一代码风格、在编写代码过程中及时代码错误
2、pretter没有对代码的质量进行检查的能力，其只会对代码风格按照指定的规范进行统一格式代码（鼠标右键格式代码）

二、如何配置ESLint和prettier

一、vscode安装对应插件

1、eslint插件目的是在编码过程中及时提示错误信息 2、prettier 用于格式化代码

二、安装ESLint和prettier

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

安装成功后可以看到配置信息安装成功配置package.json
1、npm run checklint 命令检查代码中存在不规范的位置
2、npm run reviselint 集体修复不规范地方

 "scripts": {
    "checklint": "eslint --ext .js,.vue --ignore-path .gitignore .",
    "reviselint": "eslint --fix --ext .js,.vue --ignore-path .gitignore ."
  },

三、在项目根目录下创建.eslintrc.js，并配置规则，其中rules配置可以阅读【rules】

module.exports = {
  root: true,
  extends: [
    'eslint:recommended',
    'plugin:vue/recommended',
    'plugin:prettier/recommended'
  ],
  env: {
    browser: true,
    node: true
  },
  plugins: ['vue'],
  parserOptions: {
    parser: 'babel-eslint',
    sourceType: 'module',
    allowImportExportEverywhere: false,
    codeFrame: false
  },
  rules: {
    camelcase: 2, // 驼峰
    indent: [2, 2], // 缩进2个空格
    semi: [2, 'never'], // 要求或禁止使用分号代替 ASI,即禁用行尾使用分号
    quotes: [1, 'single'], // 使用单引号
    'no-debugger': 2, // 不能debugg
    'no-empty': 2, // 块语句中的内容不能为空
    'no-extra-parens': 2, // 禁止非必要的括号
    'no-extra-semi': 2, // 禁止多余的冒号
    'comma-dangle': [2, 'never'], // 键值对最后一个不能有,
    'spaced-comment': ['error', 'always'] // 注释必须空格
  }
}

四、在根目录创建.prettierrc文件，并配置格式化规则（可根据rules自行配置）

这样就可以格式化代码是伴随eslint规则啦（鼠标右键格式代码）

{
  "semi": false,
  "singleQuote": true,
  "trailingComma": "none"
}

五、如果说想保存代码的时候ctrl+S 时自动格式代码只需要做以下操作

1、vscode-文件->首选先->设置-搜索settings.json点击编辑
2、填写完成后项目保存的时候会跟随你配置好的.eslintrc.js进行格式化代码

"editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },

三、 $\color{red}{注意事项-行尾序列LF和CRLF}$

$\color{red}{如果以上方法配置了还是错误的话，大概率是}$ 项目工程化创建时会生成.editorconfig（文件默认是Linux 的 LF），VScode 行尾序列要与文件的统一 1、windows采用回车+换行CRLF表示下一行
2、UNIX/Linux、苹果机(MAC OS系统)采用换行符LF表示下一行

nuxt、Vue项目中配置ESLint和prettier来规范代码、格式代码