vscode支持vue-cli3构建的项目引入eslint代码检测+prettier代码美化

vscode支持vue-cli3构建的项目引入eslint代码检测+prettier代码美化

1. vscode 安装插件：

   • Vetur
   • prettier
   • Eslint

2. 禁用冲突的插件:

   • Beautify

3. 删除package.json中默认eslint的配置

   
   
   image.png

4. 新建.eslintrc.js文件，对eslint进行配置，我的配置如下

module.exports = {
  root: true,
  env: {
    node: true
  },
  extends: ['plugin:vue/essential', 'eslint:recommended'],
  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'], //强制不使用分号结尾
    eqeqeq: ['error', 'always'], // 强制在任何情况下都使用 === 和 !==
    'brace-style': ['error', '1tbs', { allowSingleLine: true }] //强制在代码块中使用一致的大括号风格
  },
  parserOptions: {
    ecmaVersion: 6,
    sourceType: 'module',
    parser: 'babel-eslint'
  }
}

5. 新建.prettierrc文件对代码美化进行配置

{
  "semi": false,
  "singleQuote": true,
  "printWidth": 80,
  "useTabs": false,
  "tabWidth": 2,
  "trailingComma": "none",
  "jsxBracketSameLine": false
}

6. vscode配置工作区设置：文件->首选项->设置->工作区设置
   注意eslint.validate的作用：让vscode可以高亮vue文件中的js代码eslint问题代码

   
   
   image.png

{
  "editor.tabSize": 2, // 所有文件缩进2个空格
  "eslint.validate": [
    // 让vscode可以高亮vue文件中的js代码eslint问题代码
    "javascript",
    "javascriptreact",
    {
      "language": "vue",
      "autoFix": true
    }
  ],
  "editor.formatOnSave": true // 存储时自动格式代码 todo open
}

这样就实现了保存时自动格式化及美化代码啦~~

想设置eslint忽略的文件？

新建.eslintignore文件，写入想要忽略的文件夹名

node_modules
public
collect

注意只用写views文件夹下的文件名即可

image.png

自动保存格式化代码不生效？

文件->首选项->设置->用户设置：查看vscode用户设置里的配置是否冲突，将冲突的配置删掉即可
我的配置

image.png

github项目地址：https://github.com/SmaVivian/vue-cli3-h5-init.git