标签：vue 配置文件 VSCode 代码 html Vue eslint true prettier

ESLint ：代码检查+代码格式化工具。

Prettier：代码格式化工具。

下面详细介绍如何配置ESLint+Prettier在VSCode中开发Vue代码：

一、安装
1、安装 eslint 以及 prettier

npm i eslint prettier -D

2、安装eslint-plugin-prettier插件

npm i prettier eslint-config-prettier eslint-plugin-prettier -D

3、在 VSCode中插件安装中搜索 ESLint、Prettier - Code formatter、Vetur(因为Prettier不能格式化vue文件的template，所以使用Vetur)、这三个插件并安装。

二、配置

可以在工程根木下执行命令 eslint --init 生成.eslintrc.js文件，当然也可以手动创建该文件，一共有四个文件：

.eslintignore：忽略代码检查的配置文件

.eslintrc.js：代码检查规则的配置文件

.prettierignore：忽略代码格式化的配置文件

.prettierrc：代码格式化的配置文件

1、.eslintignore配置文件如下：

/dist
/src-bex/www
/src-capacitor
/src-cordova
/.quasar
/node_modules

2. .eslintrc.js配置文件如下：

module.exports = {
  // https://eslint.org/docs/user-guide/configuring#configuration-cascading-and-hierarchy
  // This option interrupts the configuration hierarchy at this file
  // Remove this if you have an higher level ESLint config file (it usually happens into a monorepos)
  root: true,

  parserOptions: {
    parser: 'babel-eslint',
    ecmaVersion: 2018, // Allows for the parsing of modern ECMAScript features
    sourceType: 'module', // Allows for the use of imports
  },

  env: {
    browser: true,
  },

  // Rules order is important, please avoid shuffling them
  extends: [
    // Base ESLint recommended rules
    // 'eslint:recommended',

    // Uncomment any of the lines below to choose desired strictness,
    // but leave only one uncommented!
    // See https://eslint.vuejs.org/rules/#available-rules
    'plugin:vue/essential', // Priority A: Essential (Error Prevention)
    // 'plugin:vue/strongly-recommended', // Priority B: Strongly Recommended (Improving Readability)
    // 'plugin:vue/recommended', // Priority C: Recommended (Minimizing Arbitrary Choices and Cognitive Overhead)

    // https://github.com/prettier/eslint-config-prettier#installation
    // usage with Prettier, provided by 'eslint-config-prettier'.
    'plugin:prettier/recommended',
    // "prettier",

    // "prettier/vue"
  ],

  plugins: [
    // https://eslint.vuejs.org/user-guide/#why-doesn-t-it-work-on-vue-file
    // required to lint *.vue files
    'vue',
    'prettier',

    // https://github.com/typescript-eslint/typescript-eslint/issues/389#issuecomment-509292674
    // Prettier has not been included as plugin to avoid performance impact
    // add it as an extension for your IDE
  ],

  globals: {
    ga: true, // Google Analytics
    cordova: true,
    __statics: true,
    process: true,
    Capacitor: true,
    chrome: true,
  },

  // add your custom rules here
  rules: {
    'prefer-promise-reject-errors': 'off',
    'prettier/prettier': 'error',

    // allow debugger during development only
    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
  },
};

3. .prettierignore配置文件如下：

**/*.svg

node_modules/

package.json

lib/

es/

# dist/

_site/

coverage/

CNAME

LICENlock

netlifSE

yarn.y.toml

yarn-error.log

*.sh

*.snap

.gitignore

.npmignore

.prettierignore

.DS_Store

.editorconfig

.eslintignore

**/*.yml

components/style/color/*.less

**/assets

.gitattributes

.stylelintrc

.vcmrc

.logo

.npmrc.template

.huskyrc

4. .prettierrc配置文件如下：

{

    "singleQuote": true,
  
    "trailingComma": "all",
  
    "printWidth": 100,
  
    "proseWrap": "never",
  
    "endOfLine": "auto",
  
    "overrides": [
  
      {
  
        "files": ".prettierrc",
  
        "options": {
  
          "parser": "json"
  
        }
  
      }
  
    ]
}  

5、修改VSCode配置，文件->首选项->设置,

在设置页,点击右上角第一个按钮，打开setting.json，修改内容为：

   

  {
  //保存自动格式化

  "editor.formatOnSave": true,

  //.vue文件template格式化支持，并使用js-beautify-html插件

  "vetur.format.defaultFormatter.html": "js-beautify-html",

  // js-beautify-html格式化配置，属性强制换行

  "vetur.format.defaultFormatterOptions": {
    "js-beautify-html": {
      "wrap_attributes": "force-aligned"
    }
  },

  //保存时eslint自动修复错误

  "source.fixAll.eslint": true,

  //配置 ESLint 检查的文件类型

  "eslint.validate": ["javascript", "javascriptreact", "html", "vue"],
  "[html]": {
    "editor.defaultFormatter": "vscode.html-language-features"
  },
  "[vue]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[javascript]": {
    // "editor.defaultFormatter": "vscode.typescript-language-features"
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  }
}

 

 

 

标签：vue,配置文件,VSCode,代码,html,Vue,eslint,true,prettier
来源： https://www.cnblogs.com/zjhgx/p/16403820.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。