Eslint配置指南

98 阅读1分钟

Airbnb-base

1.配置eslint

(1)安装 注意:"eslint-plugin-vue": "^8.7.1",版本号

//安装 npm i --save-dev eslint-plugin-vue eslint-config-airbnb-base 
//eslint-plugin-import eslint-import-resolver-alias 

//全局安装依赖:`npm i -g eslint`\
//跟目录安装依赖:`npm i --save-dev eslint`

(2)初始化 eslint 生成一个.eslintrc.js文件

//局部:./node_modules/.bin/eslint --init
//全局:eslint --init

(3)初始化配置选项 image.png

(4)eslint.js文件配置

module.exports = {
    env: {
        browser: true,
        es6: true
    },
    extends: ['plugin:vue/essential', 'airbnb-base', 'plugin:prettier/recommended'],
    parserOptions: {
        parser: 'babel-eslint'
    },
    plugins: ['vue'],
    rules: {
        'vue/script-setup-uses-vars': 'off',
        'import/prefer-default-export': 'off',
        'import/no-extraneous-dependencies': 0,
        'vue/multi-word-component-names': 'off', // 关闭掉命名规则的校验
        // 'prettier/prettier': 'off',
        'import/no-unresolved': 'off',
        'import/extensions': 'off',
        'vue/no-mutating-props': 1,
        eqeqeq: 1, // 两个等于给警告
        'no-restricted-syntax': 0,
        'import/no-dynamic-require': 1,
        'global-require': 1,
        'no-plusplus': 0,
        'no-unused-expressions': 0,
        'no-param-reassign': 1,
        'func-names': 0,
        'prefer-regex-literals': 0,
        'no-case-declarations': 0,
        'no-eval': 0
    }
 }

2.配置prettier

(1)安装

npm i --save-dev eslint-config-prettier prettier eslint-plugin-prettier

(2)配置

{
    "printWidth": 100,
    "tabWidth": 4,
    "useTabs": false,
    "singleQuote": true,
    "semi": false,
    "trailingComma": "none",
    "bracketSpacing": true,
    "endOfLine": "auto"
}
    

3.vscode setting.json 配置

{
    "workbench.colorTheme": "Dracula Soft",
    "editor.formatOnSave": true,
    "editor.codeActionsOnSave": {
        "source.fixAll.eslint": true,
        "source.fixAll.stylelint": true
    },
    "eslint.enable": true,
    "http.proxyAuthorization": "false",
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "vetur.format.enable": false,
    "vetur.validation.template": false,
    "vetur.validation.interpolation": false,
    "vetur.validation.style": false,
    "vetur.languageFeatures.codeActions": false,
    "vetur.validation.script": false
    }