Autocompletion of HTML file by company-mode is not working except when M-x company-web-html is explicitly called.

I'm expecting, for example, type 'di' in an html file, and get suggested 'div' for instance.

Here's my .emacs:

;; web stuff

;; automatically load web-mode when opening web-related files
(add-to-list 'auto-mode-alist '("\\.ts\\'" . web-mode))
(add-to-list 'auto-mode-alist '("\\.html?\\'" . web-mode))
(add-to-list 'auto-mode-alist '("\\.css?\\'" . web-mode))
(add-to-list 'auto-mode-alist '("\\.js\\'" . web-mode))
(add-to-list 'auto-mode-alist '("\\.scss\\'" . web-mode))

;; company-web configuration
;(add-to-list 'company-backends 'company-web-html)
;(add-to-list 'company-backends 'company-web-jade)
;(add-to-list 'company-backends 'company-web-slim)

;; set indentations
(defun my-web-mode-hook ()
  "Hooks for Web mode."
  (setq web-mode-markup-indent-offset 2)
  (setq web-mode-code-indent-offset 2)
  (setq web-mode-css-indent-offset 2)
(add-hook 'web-mode-hook  'my-web-mode-hook)
(setq tab-width 2)

;; highlight of columns
(setq web-mode-enable-current-column-highlight t)
(setq web-mode-enable-current-element-highlight t)

;; set the company completition vocabulary to css and html when in web-mode
(defun my-web-mode-hook ()
  (set (make-local-variable 'company-backends)
       '(company-css company-web-html company-yasnippet company-files))

;; emmet settings
;; turn on emmet in web-mode
(add-hook 'web-mode-hook  'emmet-mode)

;; emmet to switch between html and css properly in the same document
(add-hook 'web-mode-before-auto-complete-hooks
          (lambda ()
            (let ((web-mode-cur-language
              (if (string= web-mode-cur-language "php")
                  (yas-activate-extra-mode 'php-mode)
                (yas-deactivate-extra-mode 'php-mode))
              (setq emmet-use-css-transform
                    (string= web-mode-cur-language "css")))))

;; use company-mode in all buffers
(add-hook 'after-init-hook 'global-company-mode)

When I do M-x company-web-html it autocompletes.

  • Too broad. Please pose a specific question, which solicits a specific answer. – Drew Jan 31 '20 at 23:49
  • i want autocompletion for html and css(scss) file when they are loaded. – logan Jan 31 '20 at 23:51
  • "Help setting up" and "doesn't work" don't pose a specific question. – Drew Feb 1 '20 at 0:20
  • ok i'll fix it :) – logan Feb 1 '20 at 0:21
  • Please don't just dump your .emacs and expect us to debug it. – Stefan Feb 1 '20 at 1:03

company-capf is the backend which should interface to mode's completion support in emacs versions >= 26

In addtion, look into using lsp and using the company-lsp backend.

Instructions for installing css helpers are here:



npm install -g vscode-css-languageserver-bin

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.