vue我的项目应用eslint和prettier标准代码

1.装置eslint
//本地yarn add -D eslintnpm install eslint --save-dev
//全局yarn global add eslintnpm install -g eslint
2.运行eslint --init,抉择工程应用了vue,主动生成.eslintrc.js文件
eslint --init
3.装置prettier
//本地yarn add prettier --dev --exactnpm i -D --save-exact prettier
// 全局装置yarn global add prettiernpm i --global prettier
4.装置eslint-config-prettier插件(禁用 eslint 格调校验)
yarn add -D eslint-config-prettiernpm i -D eslint-config-prettier
5.装置eslint-plugin-prettier插件(应用eslint采纳prettier的格调校验)
yarn add -D eslint-plugin-prettiernpm i -D eslint-plugin-prettier
6.配置eslintrc.js文件(设置"plugin:prettier/recommended")
module.exports = {  root: true,  parserOptions: {    parser: "babel-eslint"  },  env: {    browser: true,    es2021: true,    node: true  },  /**   * 规定继承   * http://eslint.cn/docs/user-guide/configuring#extending-configuration-files   *【】可继承的形式有以下几种   *【】eslint内置举荐规定,就只有一个,即「eslint:recommended」   *【】可共享的配置, 是一个 npm 包,它输入一个配置对象。即通过npm装置到node_module中   *  可共享的配置能够省略包名的前缀 eslint-config-,即理论设置装置的包名是 eslint-config-airbnb-base   *【】从插件中获取的规定,书写规定为 「plugin:插件包名/配置名」,其中插件报名也是能够疏忽「eslint-plugin-」前缀   * 如'plugin:vue/essential'   *【】从配置文件中继承,即继承另外的一个配置文件,如'./node_modules/coding-standard/eslintDefaults.js'   */  extends: [    "eslint:recommended",    "plugin:vue/essential",    "plugin:prettier/recommended"  ],  parserOptions: {    ecmaVersion: 12,    sourceType: "module"  },  plugins: ["vue"],  rules: {    "no-console": process.env.NODE_ENV === "production" ? "warn" : "off",    "no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off"  }};
7.prettier 配置(非必须),根目录创立 .prettierrc.js 或 .prettier.config.js 文件,并对外export一个对象
module.exports = {  endOfLine: 'auto', // 不检测检测文件每行完结的格局  semi: false, // 应用分号, 默认true  singleQuote: true // 应用单引号, 默认false(在jsx中配置有效, 默认都是双引号)}
8.装置vscode插件:Prettier ESLint。


该插件会依据工程根目录下的eslintrc.js和prettier.config.js文件格式化代码。能够进一步设置为vscode默认formater和主动格式化。

9.未完待续