使用Vue-cli 腳手架生成的項目使用Vetur+ Prettier + ESlint的配置設置代碼規范和格式

使用Vue-cli 腳手架生成的項目使用Vetur+ Prettier + ESlint的配置設置代碼規范和格式

先安裝插件.Vetur+ Prettier + ESlint

1、ESlint設置

      文件.eslintrc.js中的配置

module.exports = {
  root: true,
  env: {
    node: true
  },
  'extends': [
    'plugin:vue/essential',
    'eslint:recommended'
  ],
  parserOptions: {
    parser: 'babel-eslint'
  },
  rules: {
    'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
    //強制使用單引號
    quotes: ['error', 'single'],
    //強制不使用分號結尾
    semi: ['error', 'never']
  }
}

2、Prettier設置

      文件prettier.config.js或者prettierrc.js

module.exports = {

    // tab縮進大小,默認為2
    tabWidth: 2,
    useTabs: false,
    // 使用分號, 默認true
    semi: false,
    // 使用單引號, 
    singleQuote: true,
    // 行尾逗號,
    TrailingCooma: 'none',
    // 空格
    bracketSpacing: true,
    // 箭頭函數參數括號 默認avoid 可選 avoid| always
    // avoid 能省略括號的時候就省略 例如x => x
    // always 總是有括號
    arrowParens: 'always',
}

3、Vetur設置，

      在文件--首選項-設置 （ctr+,）打開，可以手動去設置選項，

      也可以直接點擊搜索框最后面的位置  “打開設置（json）”打開，使用json格式來編輯設置選項,

      自動生成的就是 settings.json

 

{
  //.vue文件template格式化支持，並使用js-beautify-html插件
  "vetur.format.defaultFormatter.html": "js-beautify-html",
  //js-beautify-html格式化配置，屬性換行不強制、每行120字符
  "vetur.format.defaultFormatterOptions": {
    "js-beautify-html": {
      "wrap_line_length": 120,
      "wrap_attributes": "auto",
      "end_with_newline": false
    }
  },
  "vetur.format.defaultFormatter.js": "prettier",
  //根據文件后綴名定義vue文件類型
  "files.associations": {
    "*.vue": "vue"
  },
  //配置 ESLint 檢查的文件類型
  "eslint.validate": ["javascript", "javascriptreact"],
  //保存自動格式化
  "editor.formatOnSave": true,
  "editor.codeActionsOnSave": {
    //保存時eslint自動修復錯誤
    "source.fixAll.eslint": true
  }
}

 

 4、上述設置Vetur+ Prettier + ESlint設置以后全部保存，即可。